Leaflet创建交互地图教程

元素，Leaflet 会把地图渲染进去；L.map() 本身不创建 DOM 节点，只接管已有容器。常见错误是容器没设宽高、或 CSS 中 height 为 auto，结果地图只显示一条细线甚至完全空白。

• HTML 中写：
  （注意：不能用 % 高度除非父级有明确高度）
• JS 中调用：const map = L.map('map').setView([39.9042, 116.4074], 13); —— 第二个参数是缩放级别，不是像素值，13 是城市尺度常用值
• 如果初始化后地图不动、拖不动、缩放按钮灰掉，大概率是没成功加载图层，先检查下一步

怎么用 L.tileLayer 加载底图瓦片并避免跨域/403错误

L.tileLayer() 不是自动选服务，你得显式传入瓦片 URL 模板，且多数公开服务要求申请 key 或遵守使用条款。直接用 OpenStreetMap 默认地址虽简单，但生产环境容易被限流或返回 403。

• 推荐起步写法：L.tileLayer('https://{a-d}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map);
• 如果控制台报 Failed to load resource: the server responded with a status of 403，说明请求被拒绝，换用带 key 的服务（如 Mapbox）或本地托管瓦片
• URL 中的 {a-d} 是子域名轮询，提升并发加载能力；{z}/{x}/{y} 是标准 TMS 瓦片坐标，别手误写成 {y}/{x}/{z}（某些服务反向）
• 注意：Leaflet 默认使用 Web Mercator 投影（EPSG:3857），所有瓦片源必须匹配，否则地图错位、拉伸

为什么地图加载后仍是灰色、没图像、或 marker 不响应点击

这不是代码语法错，而是生命周期和依赖顺序问题。Leaflet 地图对象要等 DOM 就绪、容器尺寸稳定、图层成功加载三者同时满足才能正常交互。

• 确保 JS 在 底部执行，或包裹在 document.addEventListener('DOMContentLoaded', ...) 里
• 调用 .addTo(map) 必须在 L.map() 之后，且不能在 map 实例创建前就调用（比如变量声明未完成就 addTo）
• 添加 marker 前确认 map 已绑定图层，否则 marker 会存在但不可见：L.marker([39.9042, 116.4074]).addTo(map); 这行必须在 L.tileLayer(...).addTo(map) 之后
• 如果用了自定义 CSS 重置了 img 标签样式（比如加了 max-width: 100%），会导致瓦片拉伸变形，需对 .leaflet-tile 单独重置

如何快速验证 Leaflet 是否真在工作

不靠肉眼“好像动了”，而用几个确定性信号判断底层是否跑通。

• 打开浏览器开发者工具，在控制台输入 map.getCenter() 和 map.getZoom()，应返回有效数值，不是 undefined
• 在控制台执行 map.setView([0, 0], 2)，地图应立刻跳转到赤道附近，缩放到全球视角
• 检查 Network 面板，筛选 png，应看到类似 a.tile.openstreetmap.org/2/1/1.png 的请求，状态码为 200；若全是 pending 或 404，说明 URL 模板或网络策略有问题
• 右键地图 → “检查元素”，看是否生成了 div.leaflet-map-pane 及其子节点，空 div 表示初始化失败，没子节点说明图层没加进去

Leaflet 的核心链路其实就三步：容器准备 → L.map 绑定 → L.tileLayer 加载。卡住的地方几乎都出在容器尺寸、图层 URL 权限、或 JS 执行时机这三点上，而不是 API 用法本身。

今天关于《Leaflet创建交互地图教程》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！