Leaflet地图嵌入HTML需三步：①为map容器设宽高；②按序引入leaflet.css、leaflet.js并确保DOM就绪后初始化；③检查瓦片URL、referer限制及坐标系匹配。
怎么把 Leaflet 地图嵌进一个普通 HTML 页面
Leaflet 本身不依赖框架，只要页面能加载 JS 和 CSS 就能跑起来。关键不是“怎么转”，而是“怎么正确引入 + 初始化容器”。很多人卡在地图不显示，其实只是 div 没设宽高，或者 JS 执行时 DOM 还没就绪。
-
<div id="map"></div>必须有明确的width和height（比如style="width: 100%; height: 500px;"），否则 Leaflet 渲染区域为 0 - JS 要等
DOMContentLoaded或放在</body>前，否则document.getElementById('map')找不到元素 - 必须按顺序加载：先
leaflet.css，再leaflet.js，最后你的初始化代码
为什么地图加载后是灰色方块或空白
这是最常遇到的现象，本质是瓦片请求失败或坐标系错配。Leaflet 默认用 Web 墨卡托（EPSG:3857），但如果你手动传了 WGS84 经纬度却没设 crs，或者 tile URL 返回 403/404，就会只显示底色。
- 检查浏览器开发者工具 Network 标签页，看
tile请求是否返回 200；常见原因是免费图源（如 OpenStreetMap）加了 referer 限制，本地直接双击 HTML 打开会失败 —— 必须用本地服务器（如python3 -m http.server）访问 - 确认
L.tileLayer的 URL 模板正确，例如"https://{a-d}.tile.openstreetmap.org/{z}/{x}/{y}.png"，漏掉{a-d}或大小写错误都会导致 404 - 不要手动改
L.Map的crs，除非你真在用非标准投影；默认L.CRS.EPSG3857已适配绝大多数在线瓦片
如何让地图响应式适配不同屏幕宽度
Leaflet 本身不自动监听窗口 resize，但它的 invalidateSize() 方法可以手动触发重绘。重点不是“让它变”，而是“什么时候通知它变”。
- 给地图容器（
div#map）用相对单位，比如width: 100%; height: 70vh;，避免固定像素值锁死布局 - 在
window.addEventListener('resize', () => map.invalidateSize())中调用，但注意防抖 —— 频繁触发会影响性能，可用setTimeout简单节流 - 如果地图嵌在 tab 或 collapse 区域里，切换显示时也得手动调一次
invalidateSize()，否则初始尺寸还是 0
添加标记、弹窗和简单交互的实际写法
别一上来就堆插件，Leaflet 原生 API 足够处理大多数基础需求。核心是理解“图层”概念：地图是底图，标记、多边形、GeoJSON 都是叠加在上面的独立图层。
立即学习“前端免费学习笔记（深入）”；
- 添加标记：
L.marker([lat, lng]).addTo(map)，其中[lat, lng]是数组，不是对象；顺序不能反（纬度在前） - 绑定弹窗：
.bindPopup("内容")，支持 HTML 字符串，比如.bindPopup("<strong>北京</strong>") - 点击事件监听：用
marker.on('click', e => { ... })，不是原生onclick；e.latlng可取到点击位置经纬度 - 避免内存泄漏：如果动态增删标记，记得用
marker.remove()或layerGroup.clearLayers()，而不是只从 DOM 移除
