使用传单更改当前单击的标记图标

Question

我正在使用传单插件来显示标记。当我点击当前标记时，图标应该只改变当前标记。

当我再次点击另一个标记时，将该标记更改为新图标并保持所有其他标记图标不变。

好像我有2个标记图标 1- 我在地图上显示标记时设置的原始图标 2- 新标记 - 我希望在单击时设置此标记图标 marker.Only 当前标记图标应更改并保留所有其他图标原始图标。

Answer 1

你有标记层吗？如果是，您可以先创建一个新图标

var customIcon = L.Icon.extend({
    options: {
        iconSize: [40.4, 44],
        iconAnchor: [20, 43],
        popupAnchor: [0, -51]
    }
});

var myCustomIcon = new CustomIcon({ iconUrl: '../images/marker.png' });

之后，您应该在层内获得点击标记的索引并像这样更新图标：

markersLayer[markersIndex].setIcon(myCustomIcon);

Answer 2

你可以试试这个。当您单击 marker1 时，其图标将变为您设置的图标。

let marker1 = L.marker([e.latitude, e.longitude], { icon: greenIcon }).on('click', ()=>{
                marker1.setIcon(redIcon)
              }).addTo(map)

使用传单更改当前单击的标记图标

change the current clicked marker Icon using leaflet

google-maps-markers

leaflet