我正在尝试遵循传单 map 教程(使用 Mapbox 图 block )，以便基本上在我的网页中显示 map 。我确保创建一个个人 token 并按照建议在tileLayer 中替换它。但我总是在控制台中收到“无法加载资源:服务器响应状态为 401(未经授权)”错误。
我的代码与教程中的代码基本相同，只是添加了生成的 token :
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d6bab3b7b0bab3a296e7f8e5f8e7" rel="noreferrer noopener nofollow">[email protected]</a>/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4c20292d2a2029380c7d627f627d" rel="noreferrer noopener nofollow">[email protected]</a>/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin=""></script>
</head>
<body>
<div id="mapid"></div>
</body>
</html>
<script type="text/javascript">
document.onload = loadMap();
function loadMap() {
var map = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={sk.eyJ1IjoiaXFhcmNobGkiLCJhIjoiY2pqZTN1OTNxMGNubDNwbXNhbDNka2J4ZiJ9.UKoT12YRTSSUEnIGHyiScQ}', {
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
maxZoom: 18,
id: 'mapbox-outdoors',
accessToken: 'sk.eyJ1IjoiaXFhcmNobGkiLCJhIjoiY2pqZTN1OTNxMGNubDNwbXNhbDNka2J4ZiJ9.UKoT12YRTSSUEnIGHyiScQ'
}).addTo(map);
}
</script>
最佳答案
您不应将 token 放入 URL 中。当 JavaScript 加载时，acces_token={accessToken} 将被替换。您只需指定您的 key ，如下所示:
accessToken:'*剪掉 key *'
因此这应该有效:
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
maxZoom: 18,
id: 'mapbox-outdoors',
accessToken: 'sk.eyJ1IjoiaXFhcmNobGkiLCJhIjoiY2pqZTN1OTNxMGNubDNwbXNhbDNka2J4ZiJ9.UKoT12YRTSSUEnIGHyiScQ'
}).addTo(map);
关于javascript - 未经授权的访问 - mapbox : the server responded with a status of 401，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51245945/