Javascript 如何更改传单标记并重新更改为它'；如果它点击其他标记，它的位置是什么？

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

这是我的html代码

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

    var selectedIcon = new L.Icon({
        iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-black.png',
        shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        shadowSize: [41, 41]
    });
    let bluemarker = L.marker([51.5, -0.09], {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)

---

将所有标记添加到featureGroup，以便轻松访问它。然后将原点图标添加到选项中，以便您始终可以返回到此图标。现在，您可以在添加新图标之前单击重置图标：

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