使用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