使用Json在谷歌地图V3中添加多个标记

Question

我试图在谷歌地图中使用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 & LNG），但你得到1（含纬度和经度的字符串，用逗号连接）。它必须是

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

但你也有一个逻辑错误：

您覆盖在每个每个环

创建地图和$之外的信息窗口创建的最后一个地图。每（）

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