尽管遵循快速入门指南，传单地图仍未显示

Question

我遇到的问题是地图根本没有显示，地图本应显示的地方有一个空白点。我已按照 Leaflet 的快速入门指南进行操作，但我仍未确定为什么我的地图未显示。

下面是我目前的代码：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Title</title>

        <!-- Stylesheets -->
        <link rel="stylesheet" href="css/normalize.css">

        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" 
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" 
        crossorigin=""/>

        <link rel="stylesheet" href="css/styles.css">

    </head>

    <body>

        <div id="mapid">
        </div>

        <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin="">

            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>
    </body>
</html>

Answer 1

您导入 Leaflet JavaScript 文件并将您的页面代码放在 same HTML <script> 标签中。在这种情况下，浏览器应该忽略（不执行）脚本标签之间的内容，即不执行您的页面代码。

简单地分成 2 个不同的脚本标签对：

<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script>
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
// etc.
</script>

尽管遵循快速入门指南，传单地图仍未显示

Leaflet map not showing despite following quick-start guide

html

javascript

css

leaflet