我对谷歌地图标记上的事件监听器有一个奇怪的问题。基本上我想在循环中声明一堆标记,并让每个标记都有一个关联的信息窗口。相关代码为:
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]);
它们会正确打开。但是监听器不起作用。
更奇怪的是:我有另一个标记,“marker_1”在 for 循环之外声明,方式完全相同。如果我写:
google.maps.event.addListener(marker_1, 'click', function() {
infowindows[0].open(map,markers[0]);
map.panTo(markers[0].getPosition());
});
当单击 marker_1 时,信息窗口 0 打开, map 平移到标记 0。然而,当写入时,在完全相同的位置,除 marker_1 之外的相同行被 markers[0] 替换,点击标记 0 根本没有效果。
感谢您的帮助,如果有问题,我们深表歉意!
最佳答案
在您的 onclick 处理程序中,您还没有那个 i
值,在您的情况下,它总是在循环结束后采用 i
的最后一个值,即 10,而 markers[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());
});
}
关于javascript - 在循环中声明谷歌地图标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24884197/