谷歌地圖：添加每個多邊形的點擊監聽器

我正在開發一個web應用程序。我有一個谷歌地圖，我從數組中添加多邊形。我遍歷該數組並將多邊形添加到地圖。我還需要一個事件偵聽器添加到多邊形的點擊，並提醒多邊形谷歌地圖：添加每個多邊形的點擊監聽器

這個位置是我在做什麼

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

問題

的多邊形繪圖都正確。然而，問題是，當我嘗試點擊一個多邊形時，它總是顯示最後一個索引。它就像它只是點擊最後添加的多邊形。我想當我添加一個新的監聽器時，它會覆蓋舊監聽器。如何爲每個添加的多邊形添加一個偵聽器以提醒正確的索引？

謝謝

來源

2013-03-04 Youssef

[爲每個多邊形谷歌地圖V3打開信息窗口（的可能重複http://stackoverflow.com/questions/13017915/open-infowindow-for-each-polygon-google-maps- v3） – geocodezip 2013-03-04 19:24:50

這個問題的實質是，所有'函數共享相同的'p' （事件）關閉_以及循環塊_。因此，當循環執行時，'p'被綁定到最後創建的多邊形。我會使用'polygonArray.forEach'來分離變量。 – 2016-03-07 17:18:48

這是正常的行爲。有，我能想到的兩個解決方案：

1）我相信你能找回從上下文多邊形（我沒有測試）：

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

2）你也可以使用一些closures：

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

來源

2013-03-04 19:16:36 SuperSkunk

谷歌地圖：添加每個多邊形的點擊監聽器

回答

相關問題