首页 / Leaflet / 使用示例
缩放滑块
在右上角放一条缩放滑块，拖动即时改级别，地图缩放时滑块也同步回写。
源码与运行效果
说明
控件用 L.Control.extend 实现，onAdd 返回 DOM 节点，
onRemove 里解绑 zoomend。滑块范围直接读
map.getMinZoom() 与 getMaxZoom()，
地图的限制改了也不用同步修改控件。
单独调用 map.setZoom(z) 会走一次缩放动画，滑块快速拖动时
会堆积多个动画。把 zoomSnap 设为 1，滑块步长也取 1，
连续拖动只会落到整数级别，视觉上不会出现半级模糊的瓦片。
| 关键点 | 做法 | 不做会怎样 |
|---|---|---|
| 事件隔离 | disableClickPropagation + disableScrollPropagation | 拖动滑块时地图跟着平移，滚轮缩放到地图 |
| 双向同步 | input 事件调 setZoom，zoomend 回写滑块 | 用滚轮缩放后滑块停在旧位置 |
| 销毁清理 | onRemove 中 map.off | 控件移除后仍响应 zoomend，回调里读不到节点 |
| 步长 | 滑块 step 与 zoomSnap 一致 | 出现半级缩放，瓦片模糊并成倍请求 |
| 可访问性 | input 带 aria-label | 读屏软件无法描述控件用途 |
滑块适合桌面端精细控制；移动端触控区域只有 20 像素高，拖动容易误触，
通常仍保留 L.control.zoom 的加减按钮作为主入口。