Как я могу изменить divIcon className по клику? - PullRequest
Новая
       8

Как я могу изменить divIcon className по клику?

0 голосов
/ 28 января 2019

У меня есть листовка с несколькими маркерами.При нажатии на маркер этот должен быть выделен.Я использую divIcons и хочу изменить весь значок или имя класса его, оба будут работать для меня.В данный момент я просто изменяю класс созданного div в HTML-дереве, чтобы выделить его.Это прекрасно работает, но я кластерный маркер.Поэтому элементы div создаются и выводятся снова и снова, и мой класс подсветки исчезает при каждой кластеризации.

Маркеры: 

var markerIcon = L.divIcon({
   className: 'marker--default',
   html: "15",
   iconAnchor: [20, 20]
});
var markerIconActive = L.divIcon({
    className: 'marker--state--active',
    html: "15",
    iconAnchor: [20, 20]
});

Интеграция маркеров: 

var markers = L.markerClusterGroup({});

markers.addLayer(L.marker([50.919523, 6.940621], {icon: markerIcon})).on('click', onClick);

map.addLayer(markers);

Кликвент: 

function onClick(e) {
   e.target.setIcon(markerIconActive);
}

Примечание. Не работает.Я получаю ошибку «e.target.setIcon не является функцией».После прочтения документального фильма кажется, что для divIcons нет метода setIcon.Как уже говорилось, это будет работать и для меня, если изменить только className, но я не знаю, как это изменить.

Документация:

https://leafletjs.com/reference-1.4.0.html#divicon

Ответы [ 2 ]

0 голосов
/ 25 февраля 2019

Если вы хотите изменить класс вашего div, встроенной функцией будет classList .Вы можете использовать его вместе с stopPropagation, чтобы предотвратить первую найденную ошибку.например, 

function onClick(e) {
   e.stopPropagation();
   e.target.classList.toggle('newclass');
}

Вы также можете использовать метод replace вместо переключения, если вам нужен «переключатель» 

function onClick(e) {
   e.stopPropagation();
   e.target.classList.replace('oldclass','newclass');
}

Не забудьте пропустить событие buble через onClickфункция, когда вы вызываете это $.on('click', onClick(e))

markers.addLayer(L.marker([50.919523, 6.940621], {icon: markerIcon})).on('click', onClick(e));
0 голосов
/ 25 февраля 2019

Вместо того, чтобы пытаться получить доступ к функциям / свойствам через e.target.<function>, используйте e.<function> или this.<function>: 

function onClick(e) {
   e.setIcon(markerIconActive);
}

или вы можете получить к нему доступ через e.layer: 

function onClick(e) {
   let marker = e.layer;

   marker.setIcon(markerIconActive);
}

Материал для чтения

Есть ли способ щелкнуть по любой карте marker и получить широту / долготу маркера (или индекс массива)?

...