如何在点击时更改divIcon className？

Question

我有一张带有几个标记的传单地图。单击标记时，应突出显示该标记。我使用divIcons并想要更改整个图标或它的className，两者都适合我。目前我只是改变了html树中创建的div的类来突出显示它。这很好用，但我是一个标记聚类器。因此，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);

Clickevent：

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

注意：它不起作用。我收到错误“e.target.setIcon不是函数”。阅读纪录片后，似乎divIcons没有setIcon方法。如上所述，如果只更改className，它也会对我有用，但我不知道如何更改这个。

文档：

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

Answer 1

而不是尝试通过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);
}

阅读材料

Is there a way to click on any map marker and retrieve the marker's lat/lng (or array index)?

Answer 2

如果要更改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');
}

当你调用它时，不要忘记通过onClick函数传递事件buble $.on('click', onClick(e))

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