经纬志
首页 / Leaflet / API 文档

Map 事件参考

先看结论

Map 上可监听的全部事件类型、触发时机,以及事件对象里能拿到的字段。

最后验证 2026-11-03 · Leaflet 1.9.4 · 更新 2026-10-28 · 引用本文
map.on(type, fn, context?) · map.off(...) · map.once(...) · map.fire(type, data?)

参数

参数类型说明
typeString事件名,可用空格分隔多个:'click moveend'
fnFunction回调,参数为事件对象 e
contextObject可选,回调中的 this
dataObjectfire 时附加到事件对象的自定义字段

事件对象字段

字段出现条件说明
type全部事件名
target全部触发事件的对象,通常是 map
latlng鼠标、定位类鼠标位置对应的地理坐标
layerPoint / containerPoint鼠标类图层坐标与容器坐标
originalEvent鼠标、触摸原生 DOM 事件,可读 target、button
center / zoom视图类事件发生时的中心与级别
layer图层类被添加或移除的图层
name图层控件类图层在控件里的显示名
newSize / oldSizeresize容器尺寸变化前后
accuracy / boundslocationfound定位精度与范围

视图与状态事件

事件触发时机
load地图首次完成初始化与瓦片加载
movestart / move / moveend开始移动 / 每帧移动 / 移动结束
dragstart / drag / dragend仅拖拽地图时触发,缩放与 flyTo 不触发
zoomstart / zoom / zoomend缩放开始 / 过程中 / 结束
zoomlevelschangeminZoom、maxZoom 等限制被修改
viewreset视图重建,所有瓦片与矢量重新计算位置
resize容器尺寸变化,newSize 为新尺寸
unload调用 map.remove() 时

鼠标与触摸事件

事件触发时机
click / dblclick单击 / 双击,含 latlng
preclickclick 之前触发,常用于先关掉已有气泡
mousedown / mouseup按下 / 抬起
mouseover / mouseout移入 / 移出地图
mousemove移动,高频,勿做重计算
contextmenu右键,移动端为长按
keypress键盘按下,地图获得焦点后

图层与数据事件

事件触发时机
layeradd / layerremove任意图层加入 / 移出地图
baselayerchange图层控件切换底图,e.name 为显示名
overlayadd / overlayremove图层控件勾选 / 取消叠加层
popupopen / popupclose气泡打开 / 关闭,e.popup
tooltipopen / tooltipclose提示打开 / 关闭,e.tooltip
locationfound / locationerror定位成功 / 失败
autopanstart气泡打开触发地图自动平移
['click', 'dblclick', 'moveend', 'zoomend', 'layeradd'].forEach(function (name) {
  map.on(name, function (e) {
    console.log(name, e.latlng ? e.latlng.toString() : '', e.layer ? L.Util.stamp(e.layer) : '');
  });
});

/* 只触发一次,适合「地图首次就绪后再加载数据」 */
map.once('load', function () { loadPoints(); });

/* 临时监听,回调里自行摘掉 */
function onFirstMove() {
  console.log('第一次移动结束');
  map.off('moveend', onFirstMove);
}
map.on('moveend', onFirstMove);

/* 主动派发自定义事件 */
map.on('dataset:ready', function (e) { console.log(e.count); });
map.fire('dataset:ready', { count: 128 });

move 是每帧事件,moveend 才是落点。拖拽时 move 每秒触发 几十次,在里面请求数据或重绘矢量会明显卡顿。视图相关的联动统一挂 moveend + zoomend,需要实时坐标显示时才用 move 并做节流。

click 在触摸设备上会延迟约 300ms,双击缩放开启时单击事件还会 等到双击判定结束才派发。移动端优先用 tap 语义自行实现,或关闭 doubleClickZoom。另外 layeradd 是「图层加入地图」时 触发,矢量与瓦片图层各算一次,不能当作瓦片加载完成的信号,后者看 tileload 或 load。

引用本文

经纬志(2026)。《Map 事件参考》。https://www.jingweizhi.com/leaflet/api/map-events.html(访问日期 2026-11-03)。