首页 / Leaflet / API 文档
Map 事件参考
先看结论
Map 上可监听的全部事件类型、触发时机,以及事件对象里能拿到的字段。
map.on(type, fn, context?) · map.off(...) · map.once(...) · map.fire(type, data?)
参数
| 参数 | 类型 | 说明 |
|---|---|---|
type | String | 事件名,可用空格分隔多个:'click moveend' |
fn | Function | 回调,参数为事件对象 e |
context | Object | 可选,回调中的 this |
data | Object | fire 时附加到事件对象的自定义字段 |
事件对象字段
| 字段 | 出现条件 | 说明 |
|---|---|---|
type | 全部 | 事件名 |
target | 全部 | 触发事件的对象,通常是 map |
latlng | 鼠标、定位类 | 鼠标位置对应的地理坐标 |
layerPoint / containerPoint | 鼠标类 | 图层坐标与容器坐标 |
originalEvent | 鼠标、触摸 | 原生 DOM 事件,可读 target、button |
center / zoom | 视图类 | 事件发生时的中心与级别 |
layer | 图层类 | 被添加或移除的图层 |
name | 图层控件类 | 图层在控件里的显示名 |
newSize / oldSize | resize | 容器尺寸变化前后 |
accuracy / bounds | locationfound | 定位精度与范围 |
视图与状态事件
| 事件 | 触发时机 |
|---|---|
load | 地图首次完成初始化与瓦片加载 |
movestart / move / moveend | 开始移动 / 每帧移动 / 移动结束 |
dragstart / drag / dragend | 仅拖拽地图时触发,缩放与 flyTo 不触发 |
zoomstart / zoom / zoomend | 缩放开始 / 过程中 / 结束 |
zoomlevelschange | minZoom、maxZoom 等限制被修改 |
viewreset | 视图重建,所有瓦片与矢量重新计算位置 |
resize | 容器尺寸变化,newSize 为新尺寸 |
unload | 调用 map.remove() 时 |
鼠标与触摸事件
| 事件 | 触发时机 |
|---|---|
click / dblclick | 单击 / 双击,含 latlng |
preclick | click 之前触发,常用于先关掉已有气泡 |
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)。