Question

我有一个Ajax函数，它从数据库中获取一组标记数据并将其显示在Google Map上。我很成功地获得了一个标记，但是我将ajax功能放在按钮点击事件上。事件成功发生，没有任何错误。

以json对象的形式返回数据。标记不会被绘制到地图上。下面是代码：

Ajax功能

  $('#getCitizens').click(function(){

        var mapOptions = {center: new google.maps.LatLng(10.670044,-61.515305),
                         zoom: 16,
                         mapTypeId: google.maps.MapTypeId.ROADMAP
         };

        var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);     


        var citizens = (function(){         
                        var citizens = null;
                    $.ajax({
                        type: 'GET',
                        async : false,
                        global: 'false',
                        url: 'getListOfMarkers.htm',
                        headers : {Accept : 'application/json'},
                        dataType: 'json',
                        success: function(data){
                            citizens = data;
                        }               
                    });
                    return citizens;            
                  })();          

              for(var i= 0; i< citizens.length;i++){

                  console.log(citizens[i].name +' | '+citizens[i].socialSecurityNumber +' | '+citizens[i].latlng);

                  var markerType = citizens[i].citizenType


                  if(markerType = 2){
                      var citizen_icon = new google.maps.MarkerImage('resources/icons/a_new.ico',new google.maps.Size(100,106),new google.maps.Point(0,0),new google.maps.Point(50,50));
                  }else if(markerType = 3){
                      var b_icon = new google.maps.MarkerImage('resources/icons/b_new.ico',new google.maps.Size(100,106),new google.maps.Point(0,0),new google.maps.Point(50,50));

                  }else if(markerType = 4){
                      var citizen_icon = new google.maps.MarkerImage('resources/icons/c_new.ico',new google.maps.Size(100,106),new google.maps.Point(0,0),new google.maps.Point(50,50));
                  }


              var citizenPosition = new google.maps.LatLng(citizens[i].latlng);
              var citizenName = citizens[i].name;
              var citizenMarker = new google.maps.Marker({
                  position: citizenPosition,
                  map:map,
                  icon:citizen_icon,
                  title:citizenName

              });

          }


     })

JSON DATA

{"name":"Damien Edwards","latlng":"10.67023300000000,-61.51530500000000","socialSecurityNumber":194302025,"citizenType":3},

{"name":"Raj Hassen","latlng":"10.67030000000000,-61.51530500000000","socialSecurityNumber":198501011,"citizenType":2},

{"name":"Richard Gibbs","latlng":"10.670044,-61.515305","socialSecurityNumber":198501012,"citizenType":2},

{"name":"Sylvester Macintosh","latlng":"10.670044,-61.515305","socialSecurityNumber":1985010122,"citizenType":3},

{"name":"Howard Bugario","latlng":"10.670044,-61.515305","socialSecurityNumber":1985121244,"citizenType":4},

{"name":"Lawerence Figaro","latlng":"10.670044,-61.515305","socialSecurityNumber":1985121245,"citizenType":4},

{"name":"Jessie Small","latlng":"10.670044,-61.515305","socialSecurityNumber":1999020214,"citizenType":3}]

;

Answer 1

尽管英勇尝试建立citizens，但$.ajax()的异步性要求null循环执行时始终为for。

试试这个：

$('#getCitizens').on('click', function() {
    var mapOptions = {
        center: new google.maps.LatLng(10.670044, -61.515305),
        zoom: 16,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);     
    $.ajax({
        type: 'GET',
        async : true,
        global: 'false',
        url: 'getListOfMarkers.htm',
        headers : {Accept: 'application/json'},
        dataType: 'json'
    }).done(function(citizens) {
        var markerSrcs = [
            null,
            null,
            'resources/icons/a_new.ico',
            'resources/icons/b_new.ico',
            'resources/icons/c_new.ico'
        ];
        $.each(citizens, function(i, c) {
            console.log(c.name + ' | ' + c.socialSecurityNumber + ' | ' + c.latln);
            var src = markerSrcs[c.citizenType];
            if(src) {
                new google.maps.Marker({
                    position: new google.maps.LatLng(c.lat, c.lng),
                    map: map,
                    icon: new google.maps.MarkerImage( src, new google.maps.Size(100, 106), new google.maps.Point(0, 0), new google.maps.Point(50, 50) ),
                    title: c.name
              });
            }
        });
    });
});

我无法理解为什么每次创建新的公民标记时都需要创建新地图。创建一个地图并重复使用它更为典型。为此，您需要保留对标记（在数组中）的引用，以便在添加新标记之前将其删除。

Answer 2

这个问题在这一点上真的很相关：

var citizenPosition = new google.maps.LatLng(citizens[i].latlng);

google.maps.LatLng（）接受两个参数，一个用于lat，另一个用于lng，我只传递一个参数，该参数被连接起来形成latlng。通过以下方式解决了这些问题：

var citizenPosition = new google.maps.LatLng(citizens[i].lat, citizens[i].lng);

Answer 3

AJAX是异步的，所以你不能按照你的方式从函数返回响应（citizens），它仍然是null。

最简单的方法是使用success回调中的数据：

$.ajax({
    type: 'GET',
   /* async: false,*/   /* don't use async:false , it is deprecated and bad practice*/
    global: 'false',
    url: 'getListOfMarkers.htm',
    headers: {
        Accept: 'application/json'
    },
    dataType: 'json',
    success: function (data) {
        var citizens = data;
        /* run all marker code here*/
        for (var i = 0; i < citizens.length; i++) {.......
        }
});

也很好奇url是.htm，发送json不常见

使用Ajax调用在Google Map上放置多个自定义标记

3 个答案: