传单地图 - 单击它时仅更改 img 标记

Question

我正在尝试在用户单击特定图像标记时更改图像标记。这里的问题是，当我点击市场 img 更改时，但是当我点击外面或其他市场时，没有任何反应。（屏幕下方）

Please check here

这是我的 JS :

var LeafIcon = L.Icon.extend({
  options: {
    iconSize: [38, 95],
    iconAnchor: [22, 94],
    shadowAnchor: [4, 62],
    popupAnchor: [-3, -76],
  },
});

var greenIcon = new LeafIcon({
    iconUrl: project.path.base + "images/map/marker-in.png",
  }),
  redIcon = new LeafIcon({
    iconUrl: project.path.base + "images/map/marker-active.png",
  });


var testmarker = L.marker([data.lat, data.lng], { icon: greenIcon })
  .on("click", (e, j) => {
    e.target.setIcon(redIcon);
    console.log("target", e.target)
  })
  .addTo(map)
  .bindPopup($popin.innerHTML);

Answer 1

记住最后的选择并重置那个标记


var greenIcon = new LeafIcon({
    iconUrl: project.path.base + "images/map/marker-in.png",
  }),
  redIcon = new LeafIcon({
    iconUrl: project.path.base + "images/map/marker-active.png",
  });

var lastMarker;
var testmarker = L.marker([data.lat, data.lng], { icon: greenIcon })
  .on("click", (e, j) => {
    if(lastMarker){
       lastMarker.setIcon(greenIcon);
    }
    e.target.setIcon(redIcon);
    console.log("target", e.target)
    lastMarker = e.target;
  })
  .addTo(map)
  .bindPopup($popin.innerHTML);

另一种方法是始终在弹出窗口打开/关闭时设置和重置标记：

var testmarker = L.marker([data.lat, data.lng], { icon: greenIcon })
  .on("popupopen", (e) => {
    e.target.setIcon(redIcon);
  })
.on("popupclose", (e) => {
    e.target.setIcon(greenIcon);
  })
  .addTo(map)
  .bindPopup($popin.innerHTML);

传单地图 - 单击它时仅更改 img 标记

Leaflet Map - change only img marker when click on it

javascript

dictionary

leaflet