1

データベースからマーカー データの配列を取得し、それを Google マップに表示する Ajax 関数があります。1 つのマーカーを表示することに成功しましたが、ボタン クリック イベントに 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}]

;
4

3 に答える 3

0

問題はこの時点で本当に関連していました:

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

google.maps.LatLng() は lat 用と lng 用の 2 つのパラメーターを受け入れます。latlng を形成するために連結された 1 つのパラメーターのみを渡しました。問題は次の方法で解決されました。

var citizenPosition = new google.maps.LatLng(citizens[i].lat, citizens[i].lng);
于 2013-05-06T00:15:40.777 に答える