传单地图出现问题（获取未经授权的地图框图块 401）

Question

我正在尝试将传单地图添加到我的网页中，并且我正在使用 Mapbox 磁贴。我无法让基本教程中的地图正常工作，我所看到的只是一个灰屏。我有一个来自 mapbox 的 mp id，我已将它添加到我的代码中。下面附上相关代码。

var map = L.map('map').setView([51.505, -0.09], 13);
    L.tileLayer('http://{s}.tiles.mapbox.com/v3/rakshak.l937n12c/{z}/{x}/{y}.png', {
    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
    }).addTo(map);

这就是我在控制台中看到的：

GET http://a.tiles.mapbox.com/v4/rakshak.l937n12c/13/4093/2723.png 401 (Unauthorized)

在 css 中，我刚刚将地图高度设置为 height: 100vh。

我在屏幕上看到的只是地图缩放控制器和灰色屏幕。我错过了重要的一步吗？

编辑1：更新JS代码：

var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://api.tiles.mapbox.com/v4/rakshak.l937n12c/{z}/{x}/{y}.{format}?access_token=pk.eyJ1IjoicmFrc2hhayIsImEiOiJ5cHhqeHlRIn0.Vi87VjI1cKbl1lhOn95Lpw', {
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
}).addTo(map);

Answer 1

设置您的 tileLayer 以包含您的地图 ID 和您的用户令牌：

var tileLayer = L.tileLayer('https://{s}.tiles.mapbox.com/v4/{mapId}/{z}/{x}/{y}.png?access_token={token}', {
    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>',
    subdomains: ['a','b','c','d'],
    mapId: <YOUR MAPID HERE>,
    token: <YOUR TOKEN HERE>
});

这是一个关于 Plunker 的工作示例：http://plnkr.co/edit/Kf3f8h?p=preview