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

当您将其命名为$.on('click', onClick(e))

时，请不要忘记通过onClick函数传递事件的消息

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

如何在点击时更改divIcon className？

2 个答案: