Question

我已经关注了传单“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);

}

Answer 1

忘记更换id和accessToken：

的内容

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

您需要将accessToken更改为在使用Mapbox注册时获得的id，并将mapbox.streets更改为地图框项目ID，例如mapbox-outdoors，mapbox-satellite ，select dbms_sqltune.report_sql_monitor(sql_id=>'[your_sql_id_here]', type=>'HTML', report_level=>'ALL') from dual或通过Mapbox Studio Classic创建自定义地图时获得的自定义ID。

Answer 2

＆＃13;

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);

}

＆＃13;

无法加载资源：服务器响应了mapbox api的状态401

2 个答案: