加载资源失败：服务器响应 mapbox api 的状态为 401答案

【问题标题】：Failed to load resource: the server responded with a status of 401 for mapbox api加载资源失败：服务器响应 mapbox api 的状态为 401
【发布时间】：2016-01-28 11:59:36
【问题描述】：

我已关注传单“get started”教程

但我在尝试加载图块时收到 401 错误

https://api.tiles.mapbox.com/v4/your.mapbox.project.id/13/4093/2724.png?access_token=your.mapbox.public.access.token 加载资源失败：服务器响应状态为 401 （未经授权）

我错过了什么？

我的html

<html>

<head>
  <title></title>
  <link rel="stylesheet" href="elad_map.css" />
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
</head>

<body>
  <div id="map"></div>

  <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
  <script type="text/javascript" src="elad_map.js"></script>
</body>

</html>

document.onload = loadMap();

function loadMap() {
  var map = L.map('map').setView([51.505, -0.09], 13);


  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    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: 'your.mapbox.project.id',
    accessToken: 'your.mapbox.public.access.token'
  }).addTo(map);


  var circle = L.circle([51.508, -0.11], 500, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
  }).addTo(map);

  var polygon = L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
  ]).addTo(map);

}

【问题讨论】：

标签： javascript html css leaflet

【解决方案1】：

忘记换掉id 和accessToken：

id: 'your.mapbox.project.id',
accessToken: 'your.mapbox.public.access.token'

您需要将 accessToken 更改为您在 Mapbox 注册时获得的名称，并将 id 更改为 mapbox 项目 ID，例如 mapbox.streets、mapbox-outdoors、mapbox-satellite 或您获得的自定义 ID通过 Mapbox Studio Classic 创建自定义地图时。

【讨论】：

【解决方案2】：

document.onload = loadMap();

function loadMap() {
  var map = L.map('map').setView([51.505, -0.09], 13);


  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    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: 'your.mapbox.project.id',
    accessToken: 'your.mapbox.public.access.token'
  }).addTo(map);


  var circle = L.circle([51.508, -0.11], 500, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
  }).addTo(map);

  var polygon = L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
  ]).addTo(map);

}

【讨论】：

欢迎来到stackoverflow！请详细说明您的答案，您所做的不同等