Изменить значок маркера на клике с помощью листовки

20

У меня есть карта со многими (> 100) маркерами. Я хотел бы сделать так, чтобы при щелчке по этим значкам менялась иконка с выделенной версией. Я создал две пользовательских иконки, одну обычную и одну выделенную. Я получил это для работы с одиночными маркерами, но не могу найти способ настроить его, чтобы каждый значок можно было изменить, нажав на него.

Вот рабочий код для одной иконки:

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

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

Однако у меня есть много маркеров, и я использую цикл для их размещения:

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

Я попытался дать каждому маркеру уникальное имя переменной с помощью массива:

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

Что просто дает мне «неопределенный» в предупреждении.

Изменение testmarker[i].onв this.map.onтолько дает предупреждение о нажатии на карте (без изменений значка).

Изменение всей этой строки на:

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

Изменяет последний (при нажатии любой из них), одновременно выдавая неопределенное предупреждение.

Как я могу установить маркеры так, чтобы каждый из них мог быть изменен индивидуально одним щелчком мыши, но без использования сотен повторяющихся блоков кода для каждого?

leaflet markers DaleSwanson
источник

Ответы:

16

Я закончил тем, что решил это. Я также понял, что вы можете добавить произвольные опции и получить к ним доступ позже. Это полезно для назначения уникальных идентификаторов маркерам:

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
источник