Leaflet .js 未经授权的 401

Question

我是 Leaflet.js 库的新手，我正在尝试构建一个显示用户地理位置的应用程序。

问题在于，即使我使用的是显示地图所必需的默认公共令牌。控制台不允许我显示地图，它返回 401 unathorized 类型错误，因此地图只显示灰屏和带有地理位置消息的指针而不是地图，然后我尝试使用另一个令牌以及和其他帐户一样，但结果是一样的，这是我以前从未发生过的事情。

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={pk.eyJ1IjoiYXJ0aHVyOSIsImEiOiJja2cyZmVhZmUwMGFvMzBxcTJhYWp4bWtjIn0.nbrXeQG5fXBg5IFSN_XklQ}', {
 attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
 maxZoom: 18,
 id: 'mapbox/streets-v11',
 tileSize: 512,
 zoomOffset: -1,
 accessToken: 'pk.eyJ1IjoiYXJ0aHVyOSIsImEiOiJja2cyZmVhZmUwMGFvMzBxcTJhYWp4bWtjIn0.nbrXeQG5fXBg5IFSN_XklQ'
}).addTo(mymap);

mymap.locate({setView: true, maxZoom: 16});

function onLocationFound(e) {
 var radius = e.accuracy;

 L.marker(e.latlng).addTo(mymap)
     .bindPopup("You are within " + radius + " meters from this point").openPopup();

 L.circle(e.latlng, radius).addTo(mymap);
}

mymap.on('locationfound', onLocationFound);

function onLocationError(e) {
 alert(e.message);
}

mymap.on('locationerror', onLocationError);```

Answer 1

我用我的 api 密钥尝试了你的代码，然后它就可以工作了。你的钥匙有问题。

还要确保替换正确的密钥，因为您在 url 中直接有一个，在选项中有一个。

我建议用这个替换你的 tile coe 并尝试另一个键：

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    attribution: '© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> <strong><a href="https://www.mapbox.com/map-feedback/" target="_blank">Improve this map</a></strong>',
    tileSize: 512,
    maxZoom: 18,
    zoomOffset: -1,
    id: 'mapbox/streets-v11',
    accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN'
}).addTo(mymap);