Ubah ikon marker saat klik menggunakan leaflet

20

Saya memiliki peta dengan banyak (> 100) spidol di atasnya. Saya ingin membuatnya agar mengklik ikon perubahan ini ke versi yang disorot. Saya telah membuat dua ikon khusus, satu biasa, dan satu disorot. Saya mendapatkan ini berfungsi dengan spidol tunggal, tetapi tidak dapat menemukan cara untuk mengaturnya sehingga setiap ikon dapat diubah dengan mengkliknya.

Berikut adalah kode yang berfungsi untuk satu ikon:

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

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

Namun saya memiliki banyak marker dan menggunakan for for untuk menempatkannya:

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

Saya mencoba memberi setiap penanda nama variabel unik dengan menggunakan array:

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

Yang hanya memberi saya "tidak terdefinisi" dalam peringatan.

Mengubah testmarker[i].onke this.map.onhanya memberi peringatan tentang mengklik peta (tidak ada perubahan ikon).

Mengubah seluruh baris menjadi:

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

Mengubah yang terakhir (ketika ada yang diklik), sementara juga memberikan peringatan yang tidak ditentukan.

Bagaimana saya bisa mengatur penanda sehingga masing-masing dapat secara individual diubah dengan klik, tetapi tanpa menggunakan ratusan blok kode berulang untuk masing-masing?

leaflet markers DaleSwanson
sumber

Jawaban:

16

Saya akhirnya memecahkan ini. Saya juga tahu Anda dapat menambahkan opsi sewenang-wenang dan mengaksesnya nanti. Itu berguna untuk menetapkan id unik ke spidol:

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
sumber