Leaflet.js中的地图无法渲染

前端开发 2026-07-10

我又回到Leaflet.js，无法按照《Leaflet Essentials》中的教程渲染地图。

当我把文件保存为.html并打开时，网页是空白的。我以为应该像示例那样显示地图？如有指点，万分感谢。

我的代码如下：

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

解决方案

你正在尝试加载 leaflet-0.7.2，这是一个非常旧的版本（>2015），已经不再由CDN提供服务。

请更新到较新的版本，例如最新的稳定版本：[email protected]

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

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
     crossorigin=""/>

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
     integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
     crossorigin=""></script>

<div id="map" style="width: 600px; height: 400px" />

JavaScript