如何在單擊時更改 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);

點擊事件：

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.target.<function>使用e.<function>或this.<function> ：

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

或者，您可以通過e.layer訪問它：

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

   marker.setIcon(markerIconActive);
}

閱讀材料

有沒有辦法點擊任何地圖標記並檢索標記的緯度/經度（或數組索引）？

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 函數傳遞事件氣泡$.on('click', onClick(e))

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