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

Question

我的地图上有 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, 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)

Answer 1

将所有标记添加到一个特征组中，这样您就可以轻松访问它。然后将原点图标添加到选项中，这样你就可以随时回到这个图标。现在您可以在添加新图标之前重置点击图标：

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

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

How can I change leaflet marker and change back to it's position if it clicks on other marker?

javascript

leaflet

leaflet.markercluster