LeafLetJS 快速入门指南显示灰色（401 未经授权）答案

【问题标题】：LeafLetJS Quick Start Guide Shows Grey (401 UnAuthorized)LeafLetJS 快速入门指南显示灰色（401 未经授权）
【发布时间】：2020-03-13 05:31:53
【问题描述】：

我刚刚开始使用 LeafLetJs 并开始使用它，我尝试实施 LeafLetJs 的快速入门指南：https://leafletjs.com/examples/quick-start/

我按照说明添加了 CSS、JS 链接并添加了一个 div。

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>



 <!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script>



<div id="mapid"></div>

然后在 CSS 方面包含这个 CSS：

#mapid { height: 180px; }

然后在 JavaScript 部分：

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

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

这会返回一个灰屏。并在控制台中给出多个 401 UnAuthorized 错误。其中之一如下：

 https://api.tiles.mapbox.com/v4/mapbox.streets/11/1022/681.png?access_token={accesstoken} 401 (Unauthorized)

我研究过 StackOverflow 上的另一个问题，但该问题是 5 年前提出的，我尝试了解决方案，但没有任何效果。上一个问题的链接：leaflet map shows up grey

链接到 Jsfiddle：https://jsfiddle.net/saadzr/3aro8eu2/2/

任何帮助将不胜感激。

【问题讨论】：

标签： javascript leaflet mapbox

【解决方案1】：

只需从 L.tileLayer url 中删除花括号 {}

使用这个 access_token=your_access_token

而不是这个：

access_token={your_access_token}

your_access_token 等于您拥有的 mapbox 访问令牌。

你应该没事。

Updated Demo

【讨论】：