Cambiar el icono del marcador al hacer clic con el folleto

20

Tengo un mapa con muchos (> 100) marcadores en él. Me gustaría hacerlo para que al hacer clic en estos cambie el icono a una versión resaltada. He creado dos iconos personalizados, uno normal y otro resaltado. He conseguido que esto funcione con marcadores individuales, pero no puedo encontrar ninguna manera de configurarlo, por lo que cada icono se puede cambiar haciendo clic en él.

Aquí está el código de trabajo para un ícono:

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

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

Sin embargo, tengo muchos marcadores y uso un bucle for para colocarlos:

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

Traté de dar a cada marcador un nombre de variable único usando una matriz:

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

Lo que me da "indefinido" en la alerta.

Cambiar testmarker[i].ona this.map.onsolo da una alerta al hacer clic en el mapa (sin cambio de icono).

Cambiando toda esa línea a:

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

Cambia el último (cuando se hace clic en alguno), mientras que también proporciona una alerta indefinida.

¿Cómo puedo configurar los marcadores para que cada uno se pueda cambiar individualmente con un clic, pero sin usar cientos de bloques de código repetidos para cada uno?

leaflet markers DaleSwanson
fuente

Respuestas:

16

Terminé resolviendo esto. También descubrí que puedes agregar opciones arbitrarias y acceder a ellas más tarde. Eso es útil para asignar identificadores únicos a los marcadores:

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
fuente