Question

我有index.php和ajax.php。

当页面加载ajax函数时，从ajax.php返回一个json数据。 Ajax.php正在运行。我可以获得json数据。地图首先加载比ajax函数，所以我得到变量json没有定义错误。我直接使用json数据结果。

例如var json=[{{"id":48,"title":"a","lng":"28.6643180847168","lat":"41.0327529907227"}]我的代码正在运行。首先，地图正在加载，因此它会出错。

我应该使用哪种方法？我希望我能解释得足够多。

这是我的json数据结果：

[{"id":48,"title":"a","lng":"28.6643180847168","lat":"41.0327529907227"}, 
{"id":46,"title":"b","lng":"28.6722145080566","lat":"41.0330085754395 "}, 
{"id":44,"title":"c","lng":"28.6628570556641","lat":"41.032169342041 "}, 
{"id":43,"title":"d","lng":"28.6649876832962","lat":"41.0323740058176 "}];

这是index.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
        <style>
            html, body, #map-canvas {height: 100%;margin: 0;padding: 0;}
        </style>
    </head>
    <body>
        <div id="one"></div>
        <div id="map-canvas"></div>
        <script>
        $(window).load(function () {
            $.ajax({
                dataType: "json",
                url: 'ajax.php',
                success:function(data){         
                    var result = JSON.stringify(data);
                    $("#one").html(result);
                }
            });
        });
        var map;
    var json=$("#one").text();
function initialize() { 
  var mapOptions = {
    zoom: 15,
    center: new google.maps.LatLng(json[0]['lat'],json[0]['lng'])
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  // Looping through all the entries from the JSON data
  for(var i = 0; i < json.length; i++) { 
    var obj = json[i];
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(obj.lat,obj.lng),
      map: map
    });   
    var clicker = addClicker(marker, obj.title);
  } 
  function addClicker(marker, content) {
    google.maps.event.addListener(marker, 'click', function() {
      if (infowindow) {infowindow.close();}
      infowindow = new google.maps.InfoWindow({content: content});
      infowindow.open(map, marker);    
    });
  }
}
google.maps.event.addDomListener(window, 'load', initialize); 
        </script>
    </body>
</html>

Answer 1

我修改了代码，它适用于我的环境。

  $.ajax({
            dataType: "json",
            type: "POST",//please check this.
            contentType: "application/json; charset=utf-8",//check this
                url: "http://localhost/MyTESTWEBSITE/WebService.asmx/HelloWorld",//my json data
                success: function(data) {
                var result = jQuery.parseJSON(data.d); //please check this   
                for (var i = 0; i < result.DATA.length; i++) {
                    var obj = result.DATA[i];
                    //to do:Put obj.lat, obj.lng to google map
                    }
                },
                error: function(xhr, ajaxOptions, thrownError) {
                    alert(xhr.status);
                    alert(thrownError);
                }
            });
        });

来自.net的JSON数据

 [WebMethod]
public string HelloWorld() {

    string str = "{\"DATA\":[{\"id\":43,\"title\":\"d\",\"lng\":\"121.6649876832962\",\"lat\":\"23.0323740058176\"}]}";
    return str;
}

您也可以使用此链接检查JSON格式
https://jsonformatter.curiousconcept.com/

Answer 2

我解决了我的问题。我把返回的lat和long值放在地图上。它可能会帮助某人。

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
        <style>
            html, body, #map-canvas {height: 100%;margin: 0;padding: 0;}
        </style>
    </head>
    <body>
        <div id="map-canvas"></div>
        <script>
    var map;
 function initialize() {
    var url ="ajax.php";
    $.getJSON(url, function( data ) {
                var lat = [];
        var lng = [];
            $.each( data, function( key, val ) {
                        lat.push(val.lat);
            lng.push(val.lng);  });
 var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(lat[0],lng[0])
 };
 map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
for(var i = 0; i < lat.length; i++) { 
var marker = new google.maps.Marker({
  position: new google.maps.LatLng(lat[i],lng[i]),
  map: map
});   

 } });};

google.maps.event.addDomListener(window, 'load', initialize);                 
        </script>
    </body>
</html>

将json结果打印到谷歌地图

2 个答案: