Leaflet地图点击标记切换颜色：实现单标记高亮其余重置

这个问题其实很好解决，核心是你需要把所有创建出来的标记实例存储起来，而不是只保留原始数据数组points——因为points里只是坐标、标题这类数据，不是Leaflet的Marker对象，没法直接调用setIcon方法。下面给你两种可靠的实现方式：

方法一：通过图标引用判断状态 #

这种方式直接利用你已有的greenIcon和defaultIcon变量来判断标记当前的状态，代码简洁直观：

// 新增一个数组存储所有标记实例
var markers = [];
var points = [ 
  {latlng: [54.351194, 18.654101], title: "F-225", name: "Marker 1"}, 
  {latlng: [54.351194, 18.658101], title: "F-226", name: "Marker 2"}
]; 

points.forEach(function(p) { 
  // 创建标记并保存实例
  const marker = L.marker(p.latlng, { title: p.title, riseOnHover: true }) 
    .addTo(map) 
    .bindPopup(p.name); // 这里根据你的需求调整popup内容，原代码的popupName可替换回来
  
  // 绑定点击事件
  marker.on('click', function(e) {
    // 1. 记录当前标记点击前的图标状态
    const wasUsingGreenIcon = this.getIcon() === greenIcon;
    
    // 2. 遍历所有标记，将它们重置为默认图标
    markers.forEach(marker => marker.setIcon(defaultIcon));
    
    // 3. 根据之前的状态切换当前标记的图标
    if (!wasUsingGreenIcon) {
      this.setIcon(greenIcon);
    }
  });
  
  // 将标记实例加入数组
  markers.push(marker);
});

代码说明： #

• markers数组用来保存每个创建的Marker对象，这就是你要的"批量操作所有标记"的实现方式——通过遍历数组逐个调用setIcon。
• 点击时先记录当前标记的原始状态，再统一重置所有标记为默认图标，最后根据原始状态决定是否将当前标记切换为绿色图标，完美实现你的需求：其余标记为默认，当前标记切换状态。

方法二：用自定义属性跟踪状态（更可靠） #

如果担心图标对象引用比较（比如getIcon() === greenIcon）可能出现的问题（比如动态创建图标时引用不同），可以给每个标记添加自定义属性来跟踪状态，这种方式更稳健：

var markers = [];
var points = [ 
  {latlng: [54.351194, 18.654101], title: "F-225", name: "Marker 1"}, 
  {latlng: [54.351194, 18.658101], title: "F-226", name: "Marker 2"}
]; 

points.forEach(function(p) { 
  const marker = L.marker(p.latlng, { title: p.title, riseOnHover: true }) 
    .addTo(map) 
    .bindPopup(p.name);
  
  // 给标记添加自定义属性，跟踪是否为绿色图标
  marker.isGreen = false;
  
  marker.on('click', function(e) {
    // 1. 切换当前标记的状态
    this.isGreen = !this.isGreen;
    
    // 2. 遍历所有标记，设置图标并同步状态
    markers.forEach(m => {
      if (m === this) {
        // 当前标记根据状态切换图标
        m.setIcon(this.isGreen ? greenIcon : defaultIcon);
      } else {
        // 其他标记重置为默认图标，并同步状态
        m.setIcon(defaultIcon);
        m.isGreen = false;
      }
    });
  });
  
  markers.push(marker);
});

代码说明： #

• 给每个标记添加isGreen属性，明确跟踪当前是否使用绿色图标，避免了图标引用比较的潜在问题。
• 点击时先切换当前标记的状态，再遍历所有标记：当前标记根据新状态设置图标，其他标记直接重置为默认并同步状态。

两种方式都能完美实现你的需求，你可以根据自己的代码习惯选择其中一种。

内容的提问来源于stack exchange，提问作者Mateusz Gnys