Leaflet.js地图无法渲染：基于《Leaflet Essentials》教程的技术求助

我帮你梳理了几个常见的导致Leaflet地图空白的原因，你可以逐一排查：

1. 混合内容/CDN协议问题 #

你的代码里用的是http协议的Leaflet CDN链接，现在很多浏览器会阻止非安全的HTTP资源加载（哪怕是本地打开的HTML文件，部分浏览器也会有安全限制）。你可以把所有CDN链接改成https：

<link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<script src="https://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>

同时把瓦片图层的链接也改成HTTPS：

L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);

2. 老旧版本的Leaflet兼容性问题 #

Leaflet 0.7.2是非常老旧的版本（发布于2014年），不仅可能存在现代浏览器的兼容性问题，对应的CDN资源也可能不稳定。建议升级到最新稳定版，替换CDN链接为：

<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>

3. 确保DOM完全加载后再初始化地图 #

虽然你的代码里初始化脚本在地图div之后，理论上能获取到元素，但有时候浏览器渲染顺序可能有异常。你可以把初始化代码放到DOMContentLoaded事件里，确保DOM完全加载后再初始化地图：

document.addEventListener('DOMContentLoaded', function() {
  var map = L.map('map', { 
    center: [35.10418, -106.62987], 
    zoom: 10 
  }); 
  L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
});

4. 检查浏览器控制台的错误信息 #

打开浏览器的开发者工具（按F12），切换到Console标签，看看有没有报错信息——比如CDN加载失败、瓦片加载错误、JS语法错误等，这些信息能直接定位问题。比如如果显示L is not defined，说明Leaflet的JS文件没加载成功，那就要检查CDN链接是否可用。

你可以先试试把所有HTTP链接改成HTTPS，这是最常见的原因，应该能解决大部分问题。

内容的提问来源于stack exchange，提问作者Dave Diggler