web-dev-qa-db-fra.com

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

Je travaille sur une application Web .J'ai une carte Google, où j'ajoute des polygones d'un tableau. Je boucle sur ce tableau et ajoute les polygones à la carte. J'ai également besoin d'ajouter un écouteur d'événement au clic du polygone et d'alerter 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 dessinés correctement. Cependant, le problème est que lorsque j'essaie de cliquer sur un polygone, celui-ci affiche toujours le dernier index. c'est comme si on ne faisait que cliquer sur le dernier polygone ajouté. Je pense que lorsque j'ajoute un nouvel auditeur, il remplace l'ancien. Comment puis-je ajouter un auditeur pour chaque polygone ajouté afin d'alerter le bon index?

Merci

javascriptgoogle-mapsasp.net-mvc-4polygon
15
Youssef

C'est le comportement normal… Il y a deux solutions auxquelles je peux penser:

1) Je suis sûr que vous pouvez retrouver le polygone à partir du contexte (je ne l'ai pas testé):

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

Déplacez 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);
    });

OR

Vous ajoutez ceci à for-loop,

p.addListener('click', clickSelection);

et faire ceci

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