javascript 谷歌地图：为每个多边形添加点击监听器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15208965/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google map: Add click listener to each polygon
提问by Youssef
I am working on a webapplication. I have a google map, where I add polygons from an array. I loop through that array and add the polygons to the map. I also need to add an event listener to the polygon click and alert the position of the polygon
我正在开发一个网络应用程序。我有一个谷歌地图，我在其中从数组中添加多边形。我遍历该数组并将多边形添加到地图中。我还需要向多边形单击添加一个事件侦听器并提醒多边形的位置
This is what I'm doing
这就是我正在做的
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
//Loop on the polygonArray
for (var i = 0; i < polygonArray.length; i++) {
//Add the polygon
var p = new google.maps.Polygon({
paths: polygonArray[i],
strokeWeight: 0,
fillColor: '#FF0000',
fillOpacity: 0.6,
indexID: i
});
p.setMap(map);
//Add the click listener
google.maps.event.addListener(p, 'click', function (event) {
//alert the index of the polygon
alert(p.indexID);
});
}
Problem
问题
The polygons are all drawing correctly. However the problem is that when I try to click on a polygon it always shows the last index. it is like it is only clicking on the last polygon added. I think when I add a new listener it overrides the old one. How can I add a listener for each polygon added in order to alert the correct index?
多边形都正确绘制。但是问题是当我尝试单击多边形时，它总是显示最后一个索引。就像它只是点击添加的最后一个多边形。我认为当我添加一个新的监听器时，它会覆盖旧的监听器。如何为每个添加的多边形添加侦听器以提醒正确的索引？
Thanks
谢谢
回答by SuperSkunk
It's the normal behavior. There is two solutions that I can think of :
这是正常的行为。我能想到的有两种解决方案：
1) I am sure you can find back the polygon from the context (I didn't test it):
1）我相信你可以从上下文中找到多边形（我没有测试过）：
google.maps.event.addListener(polygon, 'click', function (event) {
alert(this.indexID);
});
2) You could also use some closures:
2）你也可以使用一些闭包：
var addListenersOnPolygon = function(polygon) {
google.maps.event.addListener(polygon, 'click', function (event) {
alert(polygon.indexID);
});
}
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
//Loop on the polygonArray
for (var i = 0; i < polygonArray.length; i++) {
//Add the polygon
var p = new google.maps.Polygon({
paths: polygonArray[i],
strokeWeight: 0,
fillColor: '#FF0000',
fillOpacity: 0.6,
indexID: i
});
p.setMap(map);
addListenersOnPolygon(p);
}
回答by Abhi
Move the code block inside the for-loop.
在 for 循环内移动代码块。
//Add the click listener
google.maps.event.addListener(p, 'click', function (event) {
//alert the index of the polygon
alert(p.indexID);
});
OR
或者
You add this to for-loop,
您将其添加到 for 循环中，
p.addListener('click', clickSelection);
and do this
并这样做
function clickSelection(){
alert("Clicked");
}
