leaflet地图出现问题（获取mapbox瓦片时出现未授权401错误）

Question

leaflet地图出现问题（获取mapbox瓦片时出现未授权401错误）

10

我正在尝试在我的网页中添加leaflet地图，并且我正在使用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);

- DrkStr

1

请求令牌：请参阅https://www.mapbox.com/developers/api/maps/。您的请求应如下所示：`http://api.tiles.mapbox.com/v4/{mapid}/{z}/{x}/{y}.{format}?access_token=<your access token>`。您只设置了“mapid”。 - slaur4

嘿，谢谢你的回复。我已经从mopbox屏幕上添加了访问令牌，但是我仍然看到一个灰色的屏幕和相同的错误信息在控制台中。我已经将我的更新js代码添加到了我的问题中。 - DrkStr

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- iH8 · Accepted Answer

将您的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