首页 / Leaflet / API 文档

Control.Zoom

先看结论

左上角的两个缩放按钮，触屏设备上仍是主要的缩放入口。

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

L.control.zoom(options) → Control.Zoom

参数

选项	默认值	说明
`position`	'topleft'	控件所在角
`zoomInText`	'+'	放大按钮文字，可写 HTML
`zoomInTitle`	'Zoom in'	放大按钮的 `title`，悬停提示
`zoomOutText`	'−'	缩小按钮文字
`zoomOutTitle`	'Zoom out'	缩小按钮的 `title`

成员

成员	返回值	说明
`addTo(map)`	this	挂载控件
`remove()`	this	移除并解绑事件
`getContainer()`	HTMLElement	容器节点，含两个 button
`getPosition()`	String	读取所在角
`setPosition(position)`	this	移动到其他角

var map = L.map('map', {
  center: [39.907359, 116.391263],
  zoom: 12,
  zoomControl: false,
  zoomSnap: 0.5
});

L.control.zoom({
  position: 'bottomright',
  zoomInText: '<span aria-hidden="true">＋</span>',
  zoomInTitle: '放大一级',
  zoomOutText: '<span aria-hidden="true">－</span>',
  zoomOutTitle: '缩小一级'
}).addTo(map);

/* 按钮会在达到 minZoom / maxZoom 时自动禁用，无需自己判断 */
map.setMinZoom(10);
map.setMaxZoom(17);

自定义缩放控件前先确认默认的能不能改。zoomInText 支持 HTML，换图标、加粗、改字号都能通过 CSS 完成；需要改变行为（比如每次缩放两级）再写自定义控件，否则会丢掉按钮禁用状态和触屏适配。

zoomSnap 设成 0.5 或 0 时，缩放按钮的层级递进会跟随这个步长，按钮标题若写死「放大一级」就可能与行为不符。按钮的 title 在移动端不会显示，图标本身要能自解释。

引用本文

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