Leaflet.js地图无法渲染：按《Leaflet Essentials》教程编写仍空白

你的代码出现空白主要有两个核心问题，直接修改就能解决：

• HTTP资源被浏览器拦截：
  现代浏览器会限制HTTP协议的资源加载（尤其是本地打开file://协议的页面时），你用的Leaflet CDN链接是HTTP的，改成HTTPS即可。

• Leaflet版本过于老旧：
  0.7.2是2014年的版本，和现代浏览器存在兼容性问题，建议升级到最新稳定版。

修改后的完整代码：

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet.js Essentials</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
</head>
<body>
    <div id="map" style="width: 600px; height: 400px"></div>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script>
        var map = L.map('map', {
            center: [35.10418, -106.62987],
            zoom: 10
        });
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
    </script>
</body>
</html>

额外检查点：

• 确保地图容器#map的宽高设置有效（你的代码里行内样式没问题）
• 打开浏览器控制台（F12）查看是否有报错，能快速定位剩余问题

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