Leaflet.js地图无法正常显示，求全屏显示解决方案

1. 确认依赖文件的正确性 #

Leaflet的CSS是地图正常渲染的核心，必须在JS之前引入，顺序不能错：

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

如果控制台出现L is not defined，说明JS文件没加载成功，检查URL是否正确，或者网络是否能访问CDN。

2. 强制全屏的CSS设置 #

地图容器和它的父级（html、body）必须填满整个视口，缺一个都可能导致高度失效：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* 可选，防止出现滚动条 */
}
#map {
  height: 100vh;
  width: 100vw;
}

别给#map加float、position:absolute这类可能干扰布局的样式，除非你明确知道自己在做什么。

3. 初始化代码要在DOM就绪后执行 #

如果你的JS代码写在<head>里，必须等DOM加载完再初始化地图，否则找不到#map元素：

document.addEventListener('DOMContentLoaded', function() {
  // 替换成你需要的经纬度和缩放级别
  const map = L.map('map').setView([39.9042, 116.4074], 12);
  
  // 加载瓦片图层，用OpenStreetMap的稳定源
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
  }).addTo(map);
});

如果代码写在</body>之前，也可以直接写，不用加事件监听。

4. 控制台排查关键错误 #

按F12打开控制台，重点看两个地方：

• Network面板：检查Leaflet的CSS、JS和瓦片图片是否返回200状态，404就是资源没找到。
• Console面板：看有没有JS报错，比如Cannot read properties of null (reading 'setView')就是#map元素不存在。

如果做完这些还是不行，把你的完整代码贴出来，我帮你找具体问题。

内容的提问来源于stack exchange，提问作者Nathan George