issue implementing a map into HTML file using leaflet CSS and JavaScript files

Question

我正在完成我的任務，我想知道您是否可以指出我在代碼中所犯的錯誤。

對於這個任務，我正在構建一個帶有第三方庫和 API 的 map。

這些步驟是：

從 Mapbox 請求訪問令牌（鏈接到外部站點。）
生成 HTML 5 文檔。
參考 leaflet CSS 和 JavaScript 文件。

<link rel="stylesheet" h..t@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>

<script s..t@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>

將 map 視圖設置為以下坐標：緯度：39.678121 經度：-104.961753。
添加縮放級別 15。
添加一個平鋪層並應用最大縮放 20。
使用提供的坐標添加標記。

到目前為止，這就是我所擁有的：

HTML

<!DOCTYPE html>
<html>
<head>
 <title>Basic map</title>
 <script src='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.js'></script>
 <link href='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.css' rel='stylesheet' />
 <link rel="stylesheet" href="css/leaflet.css">
 </head>
<body>
 <div id="map"></div>
 <script src="js/leaflet.js"></script>
</body>
</html>

CSS

/* required styles */

body {
 padding: 0;
 margin: 0;
} 

html, body, #map {
 height: 100%;
 width: 100%;
}

JS

       L.mapbox.accessToken = 'pk.eyJ1IjoicmVkYnVsbDg0IiwiYSI6ImNrZGNvYm9qeDB6cW0ycW16MmF0Y2szbW0ifQ.Fru8Yiy4GdL66v3o7769zg';
       var map = L.mapbox.map('map')
        .setView([39.678121, -104.961753], 15)
        .addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));

       // L.marker is a low-level marker constructor in Leaflet.
       L.marker([39.678121, -104.961753], {
        icon: L.mapbox.marker.icon({
          'marker-size': 'large',
          'marker-symbol': 'college',
          'marker-color': '#fa0'
        })
       }).addTo(map);

L.tileLayer('https://stamen-tiles-{S}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png', {
                   maxZoom: 20,
                   attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
       }).addTo(map);

出於某種原因，HTML 文件將無法使用 HTML 文檔頭部中的以下內容加載（空白頁）：

<link rel="stylesheet" h..t@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>

<script s..t@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>

但是，我能夠使用 HTML 文檔頭部中的以下鏈接來加載 HTML 文件：

 <script src='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.js'></script>

 <link href='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.css' rel='stylesheet' />

您能否協助糾正此問題和您可能發現的其他問題？

Answer 1

您的鏈接和腳本標簽缺少 href 和 src 屬性：

<link rel="stylesheet" href="h..t@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>

<script src="s..t@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>

如果它仍然不起作用，請告訴我們您從何處獲得此路徑：

"h..t@1.6.0/dist/leaflet.css"

issue implementing a map into HTML file using leaflet CSS and JavaScript files

問題描述

1 個解決方案

解決方案1
0 2020-08-03 00:34:22

issue implementing a map into HTML file using leaflet CSS and JavaScript files

問題描述

1 個解決方案

解決方案1 0 2020-08-03 00:34:22

解決方案1
0 2020-08-03 00:34:22