已遵循Leaflet快速入门指南但地图仍不显示问题求助

问题排查结果 #

你代码里存在3个核心错误直接导致地图无法显示：

1. 带src属性的script标签内嵌代码无效：你将Leaflet外部JS引入和地图初始化代码写在同一个script标签内，浏览器只会加载外部的leaflet.js文件，内嵌的初始化代码完全不会被执行。
2. 地图容器无显式宽高定义：Leaflet要求承载地图的DOM容器必须设置明确的高度属性，未设置的情况下容器高度默认为0，即便地图初始化成功也无法看到。
3. Mapbox样式ID格式有误，官方格式为mapbox/streets-v11而非mapbox.streets-v11，会导致瓦片加载失败。

修复步骤 #

• 拆分script标签，先单独引入Leaflet JS，再开新的script标签编写初始化代码，代码示例如下：

<!-- 单独引入Leaflet外部JS -->
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<!-- 单独编写地图初始化代码 -->
<script>
    var mymap = L.map('mapid').setView([51.505, -0.09], 13);
    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1,
        accessToken: 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'
    }).addTo(mymap);
</script>

• 为地图容器添加宽高样式，可在你的css/styles.css文件中添加如下规则：

#mapid {
    height: 600px;
    width: 100%;
}

也可直接写在DOM元素的行内样式中：

<div id="mapid" style="height: 600px; width: 100%;"></div>

完成以上修改后刷新页面即可正常加载地图。

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