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中，我把地图高度设置为高度：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

传单地图的麻烦（GET mapbox tiles未经授权401）

1 个答案: