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.on
ne 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?