Alterar o ícone do marcador ao clicar usando o folheto

20

Eu tenho um mapa com muitos marcadores (> 100) nele. Gostaria de fazer com que, ao clicar nessas alterações, o ícone seja alterado para uma versão destacada. Criei dois ícones personalizados, um regular e outro realçado. Consegui que isso funcionasse com marcadores únicos, mas não consigo encontrar nenhuma maneira de configurá-lo para que cada ícone possa ser alterado clicando nele.

Aqui está o código de trabalho para um ícone:

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

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

No entanto, tenho muitos marcadores e uso um loop for para colocá-los:

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

Tentei dar a cada marcador um nome de variável exclusivo usando uma 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); 
}); 
}

O que me dá "indefinido" no alerta.

Alterar testmarker[i].onpara this.map.onapenas fornece um alerta ao clicar no mapa (nenhuma alteração de ícone).

Alterando essa linha inteira para:

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

Altera o último (quando qualquer um é clicado), além de fornecer um alerta indefinido.

Como posso configurar os marcadores para que cada um possa ser alterado individualmente com um clique, mas sem usar centenas de blocos de código repetidos para cada um?

leaflet markers DaleSwanson
fonte

Respostas:

16

Acabei resolvendo isso. Eu também descobri que você pode adicionar opções arbitrárias e acessá-las mais tarde. Isso é útil para atribuir IDs exclusivos aos 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
fonte