Google map: aggiungi listener di clic per ogni poligono

Question

Sto lavorando a un'applicazione web. Ho una mappa di google, dove aggiungo poligoni da un array. I loop attraverso quella matrice e aggiungere i poligoni alla mappa. Ho anche bisogno di aggiungere un listener di eventi al poligono clic e avvisare la posizione del poligono

Questo è quello che sto facendo

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

Problema

I poligoni sono tutti disegnando correttamente . Tuttavia il problema è che quando provo a fare clic su un poligono mostra sempre l'ultimo indice. è come se fosse solo facendo clic sull'ultimo poligono aggiunto. Penso che quando aggiungo un nuovo ascoltatore, ha la precedenza su quello precedente. Come posso aggiungere un listener per ogni poligono aggiunto per avvisare l'indice corretto?

Grazie

Answer 1

È il comportamento normale. Ci sono due soluzioni che mi viene in mente:

1) Sono sicuro che si può ritrovare il poligono dal contesto (non ho provato):

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

2) Si potrebbe anche utilizzare alcuni 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); 
}