Broşür kullanarak tıklama işaretçisi simgesini değiştirin

Üzerinde çok sayıda (> 100) işaret bulunan bir harita var. Bunu yapmak istiyorum, böylece bu tıklandığında simge vurgulanan bir versiyona dönüşür. Biri normal ve biri vurgulanmış olmak üzere iki özel simge oluşturdum. Bunu tek işaretçilerle çalışmak için aldım, ancak her simgenin üzerine tıklayarak değiştirilebilmesi için herhangi bir yol bulamıyorum.

İşte bir simge için çalışma kodu:

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

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

Ancak birçok işaretleri var ve onları yerleştirmek için bir for döngüsü kullanın:

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

Bir dizi kullanarak her işaretleyici benzersiz bir değişken adı vermeye çalıştım:

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

Bu da bana uyarıda "tanımsız" veriyor.

Değişen testmarker[i].oniçin this.map.onsadece harita (simge yok değiştir) tıklatarak bir uyarı verir.

Tüm satırı şu şekilde değiştirmek:

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

Tanımsız uyarı verirken sonuncuyu (tıklandığında) değiştirir.

İşaretleyicileri, her biri için bir tıklama ile ayrı ayrı değiştirilebilecek şekilde, ancak her biri için yüzlerce tekrarlanan kod bloğu kullanmadan nasıl ayarlayabilirim?

Sonunda bunu çözdüm. Ayrıca, rastgele seçenekler ekleyip bunlara daha sonra erişebileceğinizi anladım. İşaretleyicilere benzersiz kimlikler atamak için yararlıdır:

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