Google地图:为每个多边形添加点击侦听器

Question

我正在开发一个webapplication.我有一个谷歌地图,我从阵列中添加多边形.我遍历该数组并将多边形添加到地图中.我还需要为多边形单击添加一个事件监听器,并提醒多边形的位置

这就是我正在做的事情

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);
    });
}

问题

多边形都正确绘制.但问题是,当我尝试单击多边形时,它始终显示最后一个索引.它就像它只是点击添加的最后一个多边形.我想当我添加一个新的监听器时,它会覆盖旧的监听器.如何为添加的每个多边形添加侦听器以提醒正确的索引？

谢谢

Answer 1

这是正常的行为.我能想到两种解决方案:

1)我相信你可以从上下文中找回多边形(我没有测试它):

google.maps.event.addListener(polygon, 'click', function (event) {
  alert(this.indexID);
});  

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);
}