Cambiar el icono del marcador al hacer clic en el folleto

19

Tengo un mapa con muchos marcadores (> 100). Me gustaría hacerlo para que, al hacer clic en estos cambios, aparezca el icono en una versión resaltada. He creado dos iconos personalizados, uno regular y uno resaltado. Conseguí que esto funcionara con marcadores únicos, 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 icono:

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

Intenté darle a cada marcador un nombre de variable único utilizando 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 simplemente me da "indefinido" en la alerta.

Cambiar testmarker[i].on a this.map.on solo genera una alerta al hacer clic en el mapa (sin cambiar el icono).

Cambiar toda la 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), al tiempo que también da una alerta indefinida.

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

    
pregunta DaleSwanson 16.03.2013 - 07:01

1 respuesta

14

Terminé resolviendo esto. También me di cuenta de que puedes agregar opciones arbitrarias y acceder a ellas más tarde. Esto 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];
}); 
}
    
respondido por el DaleSwanson 19.05.2013 - 11:54

Lea otras preguntas en las etiquetas