Carte Google: Ajouter un écouteur de clic à chaque polygone

Je suis en train de travailler sur une webapplication.
J'ai une google map, où j'ai ajouter des polygones à partir d'un tableau. Je boucle au travers de ce tableau et ajouter les polygones de la carte. J'ai aussi besoin d'ajouter un écouteur d'événement pour le polygone, cliquez sur et alerte la position du polygone

C'est ce que je fais

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

Problème

Les polygones sont tous correctement. Cependant le problème est que lorsque j'essaie de cliquer sur un polygone, il affiche toujours le dernier indice. c'est que ce n'est qu'en cliquant sur la dernière polygone ajouté. Je pense que lorsque j'ajoute un nouveau auditeur, il remplace l'ancien. Comment puis-je ajouter un écouteur pour chaque polygone ajouté afin d'alerter l'index correct?

Grâce

source d'informationauteur Youssef

  1. 33

    C'est le comportement normal.
    Il y a deux solutions que je peux penser :

    1) je suis sûr que vous pouvez trouver en arrière du polygone à partir du contexte (je n'ai pas tester):

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

    2) Vous pouvez également utiliser certains fermetures:

    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);
}
  2. 0

    Déplacer le bloc de code à l'intérieur de la boucle for.

    //Add the click listener
    google.maps.event.addListener(p, 'click', function (event) {
        //alert the index of the polygon
        alert(p.indexID);
    });

    OU

    Vous ajoutez ceci à boucle for,

    p.addListener('click', clickSelection);

    et faire ce

    function clickSelection(){
alert("Clicked");
}