Leaflet地图不显示等问题根源在于容器尺寸未设、CSS未前置、瓦片权限异常：需为地图div设置明确宽高与position:relative，确保leaflet.css在JS前加载，使用合规瓦片URL并检查CSP策略。
Leaflet 能在 HTML 中快速嵌入轻量、响应式、可交互的地图，但直接引入后地图不显示、缩放失灵、瓦片加载失败——这些问题基本都出在容器尺寸、异步加载顺序或瓦片 URL 权限上。
确保地图容器有明确宽高和定位
Leaflet 不会自动撑开 <div id="map">，如果父容器没设 height 或用了 display: inline，地图区域就是 0×0 像素，只看到一片空白。
- 必须给地图容器设置
height（不能是auto或依赖内容撑开） - 推荐用
position: relative避免子元素（如图层控件）错位 - 常见写法：
<div id="map" style="height: 500px; width: 100%; position: relative;"></div>
- 若嵌在 Flex/Grid 布局中，确认父级未限制高度或设置了
min-height: 0等导致收缩
初始化前等 DOM 就绪，且 Leaflet CSS 已加载
L.map() 执行时若 #map 元素还没挂载，或 leaflet.css 没生效，会导致控件错位、图标不显示、缩放按钮点击无响应。
- CSS 必须在 JS 之前引入：
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
- JS 初始化代码不要放在
<head>里裸写；要么移到<body>底部，要么包装进DOMContentLoaded：document.addEventListener('DOMContentLoaded', () => {<br> const map = L.map('map').setView([39.9042, 116.4074], 12);<br>}); - 用模块打包工具时，注意
import 'leaflet/dist/leaflet.css'是否真正注入到页面
添加底图瓦片时检查跨域与服务可用性
调用 L.tileLayer() 后地图仍是灰色，控制台报 403 或 Failed to load resource，大概率是瓦片服务拒绝了你的域名或已下线。
立即学习“前端免费学习笔记（深入）”；
- OpenStreetMap 官方
tile.openstreetmap.org禁止直接用于生产环境，仅限测试；应换用带授权的免费源，例如：L.tileLayer('https://{a-d}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {<br> attribution: '© OpenStreetMap contributors'<br>}).addTo(map); - 注意 URL 中的
{a-d}是子域名轮询，必须保留；漏掉或写成{a,b,c,d}会导致请求全发到一个域名而被限流 - 国内项目慎用境外瓦片源，可能因网络波动加载超时；可本地部署
tileserver-gl或接入高德/腾讯地图（需申请 key 并适配其图层类）
添加标记后点击无反应？检查事件绑定时机和 zIndex
用 L.marker([lat, lng]).addTo(map) 添加点后，鼠标悬停或点击没反馈，通常是 marker 被其他图层遮盖，或事件监听器绑早了。
- 确保 marker 在
map实例创建并加载底图后才添加（即tilelayer.addTo(map)之后） - 默认 marker 图标是 PNG，若页面启用了 CSP（Content-Security-Policy），需允许
data:协议，否则图标渲染为空白 - 自定义弹窗要显式调用
.bindPopup()，不是自动出现：marker.bindPopup('北京站').openPopup(); - 若使用
L.geoJSON()批量加载，注意其回调函数onEachFeature内才能安全绑定事件
最常被忽略的是：地图容器父元素意外设置了 overflow: hidden，导致缩放控件、弹窗被裁切；或者在移动端忘了加 <meta name="viewport" content="width=device-width, initial-scale=1">，致使触摸手势失效。这些细节不报错，但交互直接瘫痪。
