经纬志
首页 / Leaflet / 使用示例

基础地图与缩放控制

一张能拖能缩的地图,包含瓦片底图、缩放按钮、版权信息和圆形矢量。

Leaflet 1.9.4 · 更新 2026-10-27
源码与运行效果
运行效果

说明

示例用 OpenStreetMap 的公共瓦片,不需要任何 Key。地图容器用 flex 撑满剩余高度, 避免出现零高度导致的白屏。示例还监听了 tileerror, 瓦片连续失败三次时在右上角给出提示。

换成国内底图需要改的地方
天地图URL 里加 Key 参数,坐标系为 CGCS2000,坐标不用偏移
高德URL 换成高德瓦片地址,坐标需从 WGS84 转到 GCJ-02
腾讯与高德相同,使用 GCJ-02