Changer l'icône du marqueur au clic à l'aide du dépliant

20

J'ai une carte avec de nombreux (> 100) marqueurs dessus. Je voudrais faire en sorte qu'en cliquant sur ces changements, l'icône devienne une version en surbrillance. J'ai créé deux icônes personnalisées, une régulière et une en surbrillance. Je l'ai fait fonctionner avec des marqueurs uniques, mais je ne trouve aucun moyen de le configurer afin que chaque icône puisse être modifiée en cliquant dessus.

Voici le code de travail pour une icône:

var testmarker = L.marker([44.0, -73.0], {icon: unselectedIcon});

testmarker.on('click', function(e) {
  testmarker.setIcon(selectedIcon);
});

Cependant, j'ai de nombreux marqueurs et j'utilise une boucle for pour les placer:

//points is a 2 dim array with lat/long pairs
for (i = 0; i <= points.length-1; i++) {
    var marker = L.marker([points[i][0], points[i][1]], {icon: unselectedIcon});    
}

marker.on('click', function(e) {
  marker.setIcon(selectedIcon);
});

J'ai essayé de donner à chaque marqueur un nom de variable unique en utilisant un tableau:

for (i = 0; i <= points.length-1; i++) {
    testmarker[i] = L.marker([points[i][0], points[i][1]], {icon: unselectedIcon}); 
    testmarker[i].on('click', function(e) {
alert(e.latlng); e.setIcon(selectedIcon); 
}); 
}

Ce qui me donne juste "indéfini" dans l'alerte.

Passer testmarker[i].onà this.map.onne donne qu'une alerte lorsque vous cliquez sur la carte (pas de changement d'icône).

Changer cette ligne entière en:

testmarker[i].on('click', function(e) {
alert(e.latlng); testmarker[i].setIcon(selectedIcon);
});

Modifie le dernier (lorsqu'un clic est effectué), tout en émettant une alerte non définie.

Comment puis-je configurer les marqueurs de sorte que chacun puisse être modifié individuellement en un clic, mais sans utiliser des centaines de blocs de code répétés pour chacun?

DaleSwanson
la source

Réponses:

16

J'ai fini par résoudre cela. J'ai également compris que vous pouvez ajouter des options arbitraires et y accéder plus tard. Cela est utile pour attribuer des identifiants uniques aux marqueurs:

for (i = 0; i <= points.length-1; i++) {
    testmarker[i] = L.marker([points[i][0], points[i][1]], {icon: unselectedIcon, id: i}); 
    testmarker[i].on('click', function(e) {
        e.target.setIcon(selectedIcon);
        document.getElementById('someDiv').innerHTML = points[e.target.options.id][2];
}); 
}
DaleSwanson
la source