如果單擊其他標記，我如何更改 leaflet 標記並改回它的 position？

Question

我的 map 中有 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

將所有標記添加到功能組，以便您輕松訪問它。 然后將原點圖標添加到選項中，這樣您就可以隨時 go 回到這個圖標。 現在您可以在 append 之前重置新圖標：

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