Leaflet新版使用VectorGrid绑定点击事件报reading 'lat'错误如何解决

云上老周

2026-10-3

问题原因

该报错是Leaflet.VectorGrid插件长期未更新，未适配Leaflet 1.3及以上版本的事件交互逻辑导致的。高版本Leaflet在处理图层交互事件时，要求事件对象必须携带合法的latLng坐标属性，但VectorGrid触发点击事件时没有注入该属性，导致Leaflet内部读取lat属性时报错。

解决方案

有两种常用修复方式，可根据需求选择：

方案1：修改VectorGrid源码兼容高版本Leaflet

这是最优解，修改后可以继续使用新版Leaflet的所有特性，修改步骤如下：

打开Leaflet.VectorGrid的源码文件，搜索定位到_fireFeatureEvent方法，该方法是插件用来向上层抛出矢量要素交互事件的核心逻辑。
在方法内部触发自定义事件前，补充latLng属性的赋值逻辑，修改后的代码参考：

function _fireFeatureEvent (e, layer) {
  // 新增以下代码，从原始鼠标事件解析经纬度坐标
  e.latlng = this._map.mouseEventToLatLng(e.originalEvent);
  
  // 原有事件触发逻辑，也可以直接在fire参数里新增latlng字段
  this.fire(e.type, {
    layer: layer,
    feature: layer.feature,
    originalEvent: e,
    latlng: e.latlng // 新增字段，把解析好的经纬度传给上层事件
  });
}

修改后重新引入插件即可正常触发点击事件，不会再报lat属性读取错误。如果你是通过npm安装的Leaflet.VectorGrid依赖，可以使用patch-package工具把本次修改做成持久化补丁，避免后续重新安装依赖时修改被覆盖。