[英]Declaring google map markers in a loop
我对谷歌地图标记上的事件监听器有一个奇怪的问题。 基本上我想在循环中声明一堆标记,并让每个标记都有一个相关的infowindow。 相关代码是:
var markers=[];
var contents = [];
var infowindows = [];
for (i = 0; i < 10; i++) {
markers[i] = new google.maps.Marker({
position: new google.maps.LatLng(40+Math.random()*5, 4+Math.random()*5),
map: map,
title: 'samplemarker'
});
contents[i] = '<div class="popup_container">' +
'</div>';
infowindows[i] = new google.maps.InfoWindow({
content: contents[i],
maxWidth: 300
});
google.maps.event.addListener(markers[i], 'click', function() {
infowindows[i].open(map,markers[i]);
map.panTo(markers[i].getPosition());
});
}
标记是正确创建的,也是infowindows[i].open(map,markers[i]);
,因为如果我手动infowindows[i].open(map,markers[i]);
它们是正确打开的。 然而,听众不起作用。
甚至更奇怪:我有另一个标记,在for循环之外声明的“marker_1”,完全相同的方式。 如果我写:
google.maps.event.addListener(marker_1, 'click', function() {
infowindows[0].open(map,markers[0]);
map.panTo(markers[0].getPosition());
});
打开infowindow 0并在单击marker_1时将地图平移到标记0。 然而,当写入时,在完全相同的位置,除了用marker [0]替换的marker_1之外的相同行,点击标记0完全没有效果。
感谢您的帮助,如果这是愚蠢的话,对不起!
在你的onclick处理程序中,你还没有那个i
值,在你的情况下,它总是在循环结束后取i
最后一个值,即10,而marker [10]不存在,因为你只有10标记。
为了使其工作,您可以例如向数组中的标记添加其他属性,这将存储标记索引并在onlick处理程序中使用它
var markers=[];
var contents = [];
var infowindows = [];
for (i = 0; i < 10; i++) {
markers[i] = new google.maps.Marker({
position: new google.maps.LatLng(40+Math.random()*5, 4+Math.random()*5),
map: map,
title: 'samplemarker'
});
markers[i].index = i; //add index property
contents[i] = '<div class="popup_container"></div>';
infowindows[i] = new google.maps.InfoWindow({
content: contents[i],
maxWidth: 300
});
google.maps.event.addListener(markers[i], 'click', function() {
console.log(this.index); // this will give correct index
console.log(i); //this will always give 10 for you
infowindows[this.index].open(map,markers[this.index]);
map.panTo(markers[this.index].getPosition());
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.