Zmień ikonę znacznika po kliknięciu za pomocą ulotki

Mam mapę z wieloma (> 100) znacznikami. Chciałbym, aby kliknięcie tych ikon zmieniło ikonę na podświetloną wersję. Utworzyłem dwie niestandardowe ikony, jedną zwykłą i jedną podświetloną. Mam to do pracy z pojedynczymi znacznikami, ale nie mogę znaleźć żadnego sposobu na skonfigurowanie, więc każdą ikonę można zmienić, klikając ją.

Oto działający kod dla jednej ikony:

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

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

Mam jednak wiele znaczników i używam pętli for, aby je umieścić:

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

Próbowałem nadać każdemu znacznikowi unikalną nazwę zmiennej, używając tablicy:

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

Co po prostu daje mi „niezdefiniowane” ostrzeżenie.

Zmiana testmarker[i].onna wyświetla this.map.ontylko alert po kliknięciu mapy (bez zmiany ikony).

Zmiana całej linii na:

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

Zmienia ostatni (po kliknięciu dowolnego), jednocześnie dając niezdefiniowany alert.

Jak ustawić znaczniki, aby każdy z osobna mógł być zmieniany jednym kliknięciem, ale bez użycia setek powtarzających się bloków kodu dla każdego z nich?

Rozwiązałem to. Doszedłem również do wniosku, że możesz dodać dowolne opcje i uzyskać do nich dostęp później. Jest to przydatne do przypisywania unikalnych identyfikatorów do markerów:

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