javascript - 如何在单击时更改 divIcon className？

Question

我有一张传单 map ，上面有几个标记。单击标记时，应突出显示此标记。我使用 divIcons 并想更改整个图标或它的类名，两者都适合我。目前我只是更改 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);

点击事件:

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

阅读 Material

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