首页 / Leaflet / API 文档

Map

先看结论

地图实例，承载图层、视图状态和交互行为。

最后验证 2026-11-03 · Leaflet 1.9.4 · 更新 2026-10-27 · 引用本文

L.map(id, options) → Map

构造参数

参数	默认	说明
`center`	—	`[纬度, 经度]`
`zoom`	—	初始缩放级别，整数或小数
`minZoom` / `maxZoom`	—	缩放范围
`zoomControl`	true	是否显示左上角缩放按钮
`attributionControl`	true	右下角版权信息
`dragging`	true	是否允许拖拽
`scrollWheelZoom`	true	滚轮缩放
`doubleClickZoom`	true	双击放大
`maxBounds`	—	限制可拖出范围，`[[南,西],[北,东]]`
`crs`	EPSG:3857	坐标参考系，换 EPSG:4326 可用纯经纬度
`preferCanvas`	false	矢量用 canvas 渲染，大量要素时更快

视图方法

方法	说明
`setView(center, zoom)`	立即跳转
`flyTo(center, zoom)`	平滑飞行动画
`panTo(center)`	平移，保持缩放级别
`fitBounds(bounds)`	缩放到刚好容纳一个矩形范围
`getCenter()`	返回当前中心点
`getZoom()`	返回当前缩放级别
`getBounds()`	返回当前视野矩形
`setMaxBounds(bounds)`	运行时限制可拖动范围
`invalidateSize()`	容器尺寸变化后必须调用，否则瓦片错位

图层方法

方法	说明
`addLayer(layer)`	添加单个图层
`removeLayer(layer)`	移除图层
`hasLayer(layer)`	判断是否存在
`eachLayer(fn)`	遍历所有图层
`remove()`	销毁整张地图，释放事件与 DOM

事件

事件	触发时机	`e` 里的关键字段
`click`	单击地图	`latlng`
`move`	视图移动中，高频	`center`
`moveend`	移动结束	`center`
`zoomend`	缩放结束	`target.getZoom()`
`resize`	容器尺寸变化	`newSize`

map.on('click', function (e) {
  console.log(e.latlng.lat, e.latlng.lng);
});

map.on('moveend', function () {
  console.log(map.getCenter(), map.getZoom());
});

只在必要时监听 move。move 在拖拽时每帧触发，在里面做重计算会直接拖慢地图。需要联动时优先用 moveend。

必须调 invalidateSize 的场合

地图初始隐藏（比如放在弹窗或折叠面板里），显示后瓦片会错位或只画一半，因为初始化时读到的高度是 0。容器显示后调用一次 map.invalidateSize() 就能修正。侧边栏展开、窗口旋转、布局切换都属于这一类。

引用本文

经纬志（2026）。《Map》。https://www.jingweizhi.com/leaflet/api/map.html（访问日期 2026-11-03）。