Leaflet地图点击事件中e.latlng始终返回初始坐标问题排查

可能原因1：地图容器未设置明确的宽高样式 #

Leaflet地图容器如果没有设置固定的宽高（比如仅用height: auto或未设置高度），会导致地图无法正确计算点击位置的坐标偏移，最终返回地图中心坐标。

解决方案：
给地图容器#map添加明确的宽高样式，比如：

#map {
  width: 100%;
  height: 600px; /* 也可根据需求使用vh等相对单位 */
}

可能原因2：事件绑定或类型定义异常 #

虽然你的代码用bind(this)确保了mapClicked方法的this指向正确，但如果TypeScript类型定义存在冲突（比如引入了错误的Leaflet类型包），也可能导致事件参数e的latlng属性异常。

解决方案：

1. 确保安装了正确的Leaflet类型依赖：

npm install @types/leaflet --save-dev

2. 改用箭头函数绑定上下文，避免bind可能带来的潜在问题：

// 替换原事件绑定代码
this.map.on("click", (e: L.LeafletMouseEvent) => this.mapClicked(e));

验证方法 #

修改后点击地图，查看控制台输出的e对象，确认latlng的lat和lng值是否随点击位置变化。如果仍有异常，可以创建一个最小化测试页面，排除其他代码的干扰。

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