未经授权的访问-mapbox:服务器响应状态为401

时间:2018-07-09 12:46:09

标签: javascript leaflet mapbox

我正在尝试遵循传单地图教程(使用Mapbox磁贴),以便基本上在我的网页中显示地图。我已确保创建个人令牌,并按照建议将其替换在tileLayer中。但是我总是在控制台中收到“无法加载资源:服务器以401(未经授权)的状态响应”错误。

我的代码与教程中的代码基本相同,除了我添加了生成的令牌:

<html>
<head>
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
   integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
   crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.1/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 &copy; <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>

1 个答案:

答案 0 :(得分:2)

您不应将令牌放在URL中。加载JavaScript时,x将被替换。您只需要像在这里一样指定密钥即可。

acces_token={accessToken}

因此这应该起作用:

accessToken:'*cut key away*'