[英]Google maps JS API V3,add multiple markers to map with infowindows from remote json source
我想在谷歌 map 上放置多個標記,每個標記都有自己的信息窗口。 我需要放置這些標記的數據是動態的,並且是從提供 json output 的遠程 api 獲得的。 json 的格式為,
{0 : {lat:"", lng:"", description:"", .....}, 1 : {lat: "", .....}}
等等。 它可以包含任意數量的值集。 然而,每組的格式是定義的。 此外,鍵是這樣的,它們可以很容易地被迭代。 我寫的代碼如下:
var map;
var initPos;
var marker;
var pins;
var infowindow = null;
function count(obj) {
var i = 0;
for (var x in obj)
if (obj.hasOwnProperty(x))
i++;
return i;
};
function initialize() {
var myOptions = {
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
infowindow = new google.maps.InfoWindow();
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
initPos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(initPos);
}, function() {
initPos = new google.maps.LatLng(19.074448,72.872314);
map.setCenter(initPos);
});
}
else {
initPos = new google.maps.LatLng(19.074448,72.872314);
map.setCenter(initPos);
}
var i, pins, html, pinLatLng, pinMarkers, contentString;
$.getJSON('/user/map/', function (data) {
for (i = 0; i < count(data); i++) {
pins = data[i];
html = '<h4>'+pins['title']+'</h4>'+'<p>'+pins['description']+'</p>'+'<p><a href="'+pins['url']+'">Read More</a>'
pinLatLng = new google.maps.LatLng(parseFloat(pins['lat']), parseFloat(pins['lng']));
pinMarkers = new google.maps.Marker({position: pinLatLng, map: map, animation: google.maps.Animation.Drop});
contentString = "Some content";
google.maps.event.addListener(pinMarkers, "click", (function(pinMarkers, i) {
return function() {
infowindow.setContent(html);
infowindow.open(map, pinMarkers);
}
})(pinMarkers, i));
}
});
};
不要關注 navigator.geolocation 部分,而是看其他的東西。 現在這個腳本的作用是,它只標記 map 上 json 中的最后一個標記,並且未顯示 rest。 我究竟做錯了什么? 編輯:所以我在 json 格式中犯了一個錯誤,我現在已經修復了。 現在的問題是所有信息窗口都顯示相同的數據,而不是每個不同的數據。 它現在確實顯示了不同的標記。 EDIT2 :它現在工作。 按照此處給出的步驟http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/
您是否檢查過 jQuery 是否以正確的格式獲取 JSON 數據? jQuery 的 JS 檢查可能非常嚴格,在這種情況下,我建議使用以下格式:
[{object},{object},{object}]
而不是:
{0:{object},1:{object},2:{object}}
這可能還需要您引用標識符:
{"0":{object},"1":{object},"2":{object}}
因此,在標記 function 的第一行之前添加:
console.log(data);
看看結果如何。 一旦您確認數據是正確的,我還建議您使用 jQuery 的 $.each 運算符進行循環:
$.each(data,function(key,val){
//stuff
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.