1

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

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

阿贾克斯函数

  $('#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}]

;
4

3 回答 3

3

尽管建立. citizens_ $.ajax()_nullfor

试试这个 ：

$('#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
              });
            }
        });
    });
});

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

于 2013-05-06T00:44:18.227 回答
0

此时问题确实相关：

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);
于 2013-05-06T00:15:40.777 回答
-1

AJAX 是异步的，因此您不能citizens以您正在做的方式从函数返回 response()，它会是静止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 并不常见

于 2013-05-05T23:46:08.463 回答