嘿，这个问题很常见——你只需要在每次点击新标记时，先清除之前选中标记的高亮类就可以了！我给你两种简单的解决方案，结合你的代码来修改：

方法1：用变量跟踪当前选中的标记（推荐，性能更优） #

这种方法通过一个变量记录当前选中的标记，每次点击时先移除它的高亮类，再给新标记添加类，避免遍历DOM的开销。

修改你的代码如下：

// 在循环外面定义变量，用来跟踪当前选中的标记
let selectedMarker = null;

data.forEach((a) => {
  let l = L.geoJSON(a.geometry)._layers;
  const that = this;
  [l] = Object.keys(l).map((ob) => l[ob]);
  const icon = new utils.IconImage({
    className: "data-icon",
    iconAnchor: [15, 10],
    icon: a.asset_type.icon,
    id: parseInt(a.id, 10),
  });
  const coordinates = JSON.parse(JSON.stringify(a.geometry.coordinates));
  bounds.push(coordinates.reverse());
  l.setIcon(icon).addTo(this.map);
  
  l.on("click", (e) => {
    // 1. 移除之前选中标记的高亮类
    if (selectedMarker) {
      selectedMarker._icon.classList.remove("leaflet-edit-marker-selected");
    }
    // 2. 给当前点击的标记添加高亮类
    e.target._icon.classList.add("leaflet-edit-marker-selected");
    // 3. 更新当前选中的标记为当前点击的元素
    selectedMarker = e.target;
  });
});

方法2：直接遍历DOM移除所有高亮类（简单直观） #

如果你的标记数量不多，也可以直接通过DOM选择器找到所有带有高亮类的元素，统一移除类后再给当前标记添加，代码更简洁：

data.forEach((a) => {
  // ... 你的其他初始化代码保持不变 ...
  
  l.on("click", (e) => {
    // 移除所有已高亮的标记的类
    document.querySelectorAll(".leaflet-edit-marker-selected").forEach(el => {
      el.classList.remove("leaflet-edit-marker-selected");
    });
    // 给当前点击的标记添加高亮类
    e.target._icon.classList.add("leaflet-edit-marker-selected");
  });
});

两种方法的对比 #

• 方法1性能更好，不需要遍历整个DOM，直接操作之前记录的元素，适合标记数量较多的场景。
• 方法2代码更简洁，不需要额外维护变量，适合标记数量少的情况。

内容的提问来源于stack exchange，提问作者Pavan Kusunuri