Question

我正在尝试在google地图中使用json调整我的代码。我试着查看stackoverflow的其他线程，但没有帮助我。如何使用json接收的坐标在地图上显示多个点？ firebug中的此代码显示没有错误，地图显示为全蓝色。

var geocoder;
var map;

function initialize() {  

var url = '/project/display/get_coordinates/';

$.getJSON(url, function(data) {

$.each(data, function(index, c) {   

//alert(c.fields['lat']+','+c.fields['lng']); result: -23.0522826,-43.32745712

//Map
latlng = new google.maps.LatLng(c.fields['lat']+','+c.fields['lng']);  

//options
var myOptions = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: true
};   

//get the map
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

//marker
var marker = new google.maps.Marker({
  map: map,
  position: latlng,
  //title: {{i.display.codigo}}          
});

//infowindow
var infowindow = new google.maps.InfoWindow({
   content: 'oi'
});

//click infowindow
google.maps.event.addListener(marker, 'click', function() {
   infowindow.open(map, marker);
});


});//close each

});//close getjson

}//close initialize

我在Json的回答：

[{"pk": 1, "model": "address.coordinates", "fields": {"lat": "-23.0522826", "lng": "-43.32745712"}}, {"pk": 2, "model": "address.coordinates", "fields": {"lat": "-22.24569326", "lng": "-43.7028948"}}]

谢谢！

Answer 1

这里有1个真正的错误：

latlng = new google.maps.LatLng(c.fields['lat']+','+c.fields['lng']);

google.maps.LatLng需要2个参数（lat＆amp; lng），但是你提供1（包含lat和lng的字符串，用逗号连接）。它必须是

latlng = new google.maps.LatLng(c.fields['lat'],c.fields['lng']);

但您也有逻辑错误：

您覆盖在每个每个循环上创建的最后一个地图

在$ .each（）

之外创建地图和infoWindow

function initialize() 
{  
  var myOptions = 
      {
        zoom: 5,
        center: new google.maps.LatLng(1,1) ,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        streetViewControl: true
      }; 

   var url = '/project/display/get_coordinates/';


  $.getJSON(url, function(data) {

    map= new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var bounds=new google.maps.LatLngBounds();
    infowindow = new google.maps.InfoWindow({
                    content: 'oi'
                  });

    $.each(data, function(index, c) {   

      var latlng = new google.maps.LatLng(c.fields['lat'],c.fields['lng']); 

      var marker = new google.maps.Marker({
                      map: map,
                      position: latlng,
                      title:'pk:'+c.pk
                  });
      bounds.extend(latlng);

      google.maps.event.addListener(marker, 'click', function() {
          infowindow.close();
          infowindow.setContent('pk:'+c.pk);
          infowindow.open(map, marker);
      });


});//close each
map.fitBounds(bounds);
});//close getjson

}//close initialize

使用Json在Google Maps V3中添加多个标记

1 个答案: