如何在单击时更改 divIcon className？

Question

我有一张传单地图，上面有几个标记。单击标记时，应突出显示此标记。我使用 divIcons 并想更改整个图标或它的 class 名称，两者都适合我。目前我只是更改 html 树中创建的 div 的 class 以突出显示它。这很好用，但我使用了一个标记聚类器。因此，div 被创建并一次又一次地转储，我的突出显示 class 在每个集群中消失。

标记：

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 is not a function"。看完纪录片后，似乎没有 divIcons 的 setIcon 方法。如前所述，如果只更改 class 名称，它对我也有用，但我不知道如何更改它。

文档：

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

阅读Material

有没有办法点击任何地图 marker 并检索标记的 lat/lng（或数组索引）？

Answer 2

如果你想改变你的div的class，原生函数是classList。您可以将它与 stopPropagation 一起使用，以防止您指出的第一个错误。像这样

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

如果你想要 "switch"

，你也可以使用 replace 方法而不是切换

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

调用 onClick 函数时不要忘记传递事件气泡 $.on('click', onClick(e))

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

如何在单击时更改 divIcon className？

How can I change divIcon className on click?

javascript

marker

leaflet