Leaflet地图光标坐标配置修改后不生效问题排查求助

问题根因 #

• Leaflet 的 L.Map.addInitHook 属于全局注册逻辑，首次注册完成后，新的 CursorHandler 定义不会自动覆盖已经挂载到 Map 原型上的旧版本 handler
• 地图实例未完全销毁、组件复用时，旧 handler 绑定的 mousemove 等事件监听器没有被卸载，旧逻辑仍在后台运行
• React 构建缓存、浏览器强缓存会导致修改后的代码未被实际加载执行
• 项目内存在重复注册的同类型事件监听器，旧逻辑输出覆盖了新逻辑的修改

解决步骤 #

1. 先清除全局残留的旧注册逻辑
   在注册新的 CursorHandler 前先执行以下代码，清除旧版本的全局挂载：

// 过滤移除和cursor handler相关的旧初始化钩子
if (L.Map._initHooks) {
  L.Map._initHooks = L.Map._initHooks.filter(hook => 
    !(hook.toString().includes('cursor') || hook.toString().includes('CursorHandler'))
  );
}
// 删除旧版本的CursorHandler定义，避免复用旧逻辑
delete L.CursorHandler;

2. 初始化地图时先销毁旧handler再挂载新版本
   创建地图实例时先禁用默认的cursor handler，手动清理残留后再启用新注册的版本：

const map = L.map('map', {
  // 初始化时先禁用cursor handler
  cursor: false,
  // 其他地图配置项
});

// 销毁已存在的旧cursor handler实例
if (map.cursor) {
  map.cursor.disable();
  delete map.cursor;
}

// 重新注册新的handler后启用
L.Map.addInitHook('addHandler', 'cursor', L.CursorHandler);
map.cursor.enable();

3. 正确实现坐标格式化逻辑
   要实现保留两位小数的纯坐标输出，_update 方法写法如下：

_update: function (e) {
  const lat = e.latlng.lat.toFixed(2);
  const lng = e.latlng.lng.toFixed(2);
  this._popup.setLatLng(e.latlng)
    .setContent(`${lat},${lng}`);
}

4. 清理缓存避免旧代码残留

• 浏览器端：打开开发者工具后，右键地址栏左侧的刷新按钮，选择「清空缓存并硬性重新加载」
• 项目端：删除项目根目录下 node_modules/.cache 文件夹后，重启npm启动命令
• 排查项目内其他文件是否有注册地图 mousemove 事件输出坐标的逻辑，避免多监听冲突

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