Leaflet 地图显示为空白页，通常是因为地图容器 缺少显式高度样式；只需为其设置 height（如 100vh 或固定像素值），即可正常渲染地图和标记。
leaflet 地图显示为空白页，通常是因为地图容器 `
` 缺少显式高度样式；只需为其设置 `height`（如 `100vh` 或固定像素值），即可正常渲染地图和标记。
Leaflet 是一个轻量、开源的 JavaScript 地图库，常用于快速集成交互式地图。但初学者常遇到“页面空白、无报错、地图不显示”的问题——根本原因并非代码逻辑错误，而是 CSS 样式缺失：HTML 中的
默认为 height: 0，导致地图容器不可见，即使 JavaScript 成功初始化了地图实例，也无法渲染。
✅ 正确做法是为地图容器显式指定高度。推荐使用视口单位确保响应式适配：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Leaflet 简易地图示例</title>
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
<style>
/* 关键：必须设置高度，否则地图容器塌陷 */
#map {
height: 500px; /* 推荐：固定高度，便于调试 */
/* 或使用：height: 100vh; /* 全屏高度 */
/* 或：min-height: 400px; */
width: 100%;
margin: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>
<script>
// 初始化地图（中心：伦敦，缩放级别 13）
const map = L.map('map').setView([51.505, -0.09], 13);
// 添加底图瓦片（OpenStreetMap）
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// 添加标记点（与地图中心重合）
L.marker([51.505, -0.09])
.bindPopup('这是你的第一个 Leaflet 标记！')
.addTo(map);
</script>
</body>
</html>⚠️ 注意事项：
- 避免 height: 100% 单独使用：若父容器（如 或 ）未设高度，#map { height: 100% } 仍会失效；此时优先用 height: 100vh 或明确像素值。
- 确保 DOM 加载完成：本例中脚本置于 底部，已自然保障 DOM 就绪；若脚本置于 ，需包裹在 DOMContentLoaded 事件中。
- 检查浏览器控制台：虽然本例无 JS 报错，但建议始终开启开发者工具（F12），确认网络标签页中 leaflet.css 和 leaflet.js 加载成功，且瓦片 URL（如 tile.openstreetmap.org）未被拦截或跨域限制。
- HTTPS 环境要求：现代浏览器对地理定位和部分瓦片服务强制 HTTPS，本地直接双击 .html 文件（file:// 协议）可能导致瓦片加载失败，建议通过本地服务器（如 VS Code Live Server 插件）预览。
掌握这一关键样式规则后，你就能稳定复现 Leaflet 官方入门示例，并在此基础上扩展 GeoJSON、自定义图标、弹窗交互等高级功能。
