Leaflet 1.9.3：如何通过自定义事件实现标记图标切换重置

核心思路 #

Leaflet的Marker属于地图图层，可利用地图作为事件总线传递自定义事件，避免维护全局Marker数组。放弃原生DOM事件，改用Leaflet自身的事件触发与监听机制，让所有Marker监听地图上的重置事件，点击新Marker时触发地图的重置事件，自动完成其他Marker的图标重置。

完整实现代码 #

// 定义常量
const RESET_MARKER_ICON_EVENT_NAME = 'resetMarkerIcon';
const selectedIcon = L.icon({
  iconUrl: '/icones/selected.svg',
  iconSize: [22, 29], 
  iconAnchor: [15, 26],
  popupAnchor: [-3, -3]
});

// 每个Marker的默认图标（需根据实际业务替换）
const defaultIcon = L.icon({
  iconUrl: '/icones/default.svg',
  iconSize: [22, 29], 
  iconAnchor: [15, 26],
  popupAnchor: [-3, -3]
});

// 已初始化的地图实例
const map = L.map('map').setView([51.505, -0.09], 13);

// 创建Marker的通用函数（批量创建时复用）
function createMarker(latLng) {
  const marker = L.marker(latLng, { icon: defaultIcon }).addTo(map);

  // Marker点击逻辑：先触发全局重置，再设置自身为选中状态
  marker.on('click', () => {
    map.fire(RESET_MARKER_ICON_EVENT_NAME);
    marker.setIcon(selectedIcon);
  });

  // 监听地图的重置事件：恢复自身默认图标
  marker.on(RESET_MARKER_ICON_EVENT_NAME, () => {
    marker.setIcon(defaultIcon);
  });

  return marker;
}

// 示例：创建测试Marker
createMarker([51.5, -0.09]);
createMarker([51.51, -0.1]);
createMarker([51.49, -0.08]);

关键说明 #

1. 事件总线选型：地图实例作为所有Marker的父容器，触发的事件可被所有Marker监听，无需手动维护全局Marker列表。
2. Leaflet事件机制：使用Leaflet内置的fire()触发事件、on()监听事件，这是Leaflet实例间传递事件的标准方式，替代原生DOM事件可避免跨实例事件传递失效问题。
3. 执行顺序：点击Marker时先触发重置事件（让所有Marker恢复默认），再设置自身为选中图标，确保最终只有当前点击的Marker处于选中状态。

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