如果单击其他标记，我如何更改传单标记并更改回它的位置？

如何解决如果单击其他标记，我如何更改传单标记并更改回它的位置？

我的地图中有 3 个标记，现在我想点击任何标记。当我点击标记时它应该是黑色的，当我点击另一个标记时它应该像之前一样改变。当前标记在点击时变为黑色。

这是我的 html 代码

<div id="mapid" style="width: 600px; height: 400px;"></div>

这是我的js脚本

var mymap = L.map('mapid').setView([51.505,-0.09],13);
    L.tileLayer('https://api.mapBox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcfig214AriISLbB6B5aw',{
        maxZoom: 18,tileSize: 512,zoomOffset: -1
    }).addTo(mymap);

    var blue = new L.Icon({
        iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-blue.png',shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',iconSize: [25,41],iconAnchor: [12,popupAnchor: [1,-34],shadowSize: [41,41]
    });
    var red = new L.Icon({
        iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png',41]
    });
    var yellow = new L.Icon({
        iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-gold.png',41]
    });

    var selectedIcon = new L.Icon({
        iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-black.png',41]
    });
    let bluemarker = L.marker([51.5,{icon: blue }).on('click',function(e){
        bluemarker.setIcon(selectedIcon)
    }).addTo(mymap);

    let redmarker = L.marker([51.502866,-0.082397],{icon: red }).on('click',function(e){
        redmarker.setIcon(selectedIcon)
    }).addTo(mymap)
    let yellowmarker =L.marker([51.506552,-0.092697],{icon: yellow }).on('click',function(e){
        yellowmarker.setIcon(selectedIcon)
    }).addTo(mymap)

解决方法

将所有标记添加到要素组，以便您轻松访问它。然后将原点图标添加到选项中，这样您就可以随时返回到该图标。现在您可以在附加新图标之前重置图标：

var fg = L.featureGroup().addTo(mymap);
let bluemarker = L.marker([51.5,-0.09],{originIcon: blue }).on('click',function(e){
        resetIcons();
        bluemarker.setIcon(selectedIcon)
    }).addTo(fg);

let redmarker = L.marker([51.502866,-0.082397],{originIcon: red }).on('click',function(e){
        resetIcons();
        redmarker.setIcon(selectedIcon)
    }).addTo(fg)
let yellowmarker =L.marker([51.506552,-0.092697],{originIcon: yellow }).on('click',function(e){
        resetIcons();
        yellowmarker.setIcon(selectedIcon)
    }).addTo(fg)


function resetIcons(){
  fg.getLayers().forEach((layer)=>{
     layer.setIcon(layer.options.originIcon);
  });
}