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

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数据

{"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

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

Answer 3

的问题，在这一点上真的与普通：

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

google.maps.LatLng（）接受两个参数之一lat和一个用于LNG我只传递一个参数，该参数被连接起来形成latlng。该isses被解决：

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