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

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

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.eyj1ijoicmfrc2hayisimeij5chqehlrin0.Vi87VjI1cKbl1lhOn95Lpw'{
属性：“地图数据©；贡献者，图像©”，
最大缩放：18
}).addTo（地图）；

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

var tileLayer=L.tileLayer（'https://{s}.tiles.mapbox.com/v4/{mapId}/{z}/{x}/{y}.png？访问令牌={token}{
属性：“地图数据©；贡献者，图像©”，
子域：['a'，'b'，'c'，'d']，
mapId:，
代币：
});

---

下面是一个关于Plunker的工作示例：

请求令牌：请参阅。您的请求应该如下所示：

http://api.tiles.mapbox.com/v4/{mapid}/{z}/{x}/{y}.{format}？access_token=

。您只设置了

mapid

嘿，谢谢您的回复，我从mopbox屏幕添加了访问令牌，我仍然在控制台中看到灰色屏幕和相同的错误消息。我已经在我的问题中添加了我的更新js代码。尝试了这个，现在我在传单的行中得到了错误“UncaughtTypeError:undefined不是一个函数”。js:7。好吧，我给你的代码有效，你可以检查示例。我能说什么？这是另一个使用MapID和令牌的Plunker:，它可以工作。根据你提供的代码，我看不出你做错了什么。你能分享一个有你问题的Plunker或JSFIDLE吗？以前从未使用过plnkr，所以不确定我是否做对了。这里是链接：你的CSS是错误的，你必须给html和body元素一个100%的高度：

html，body，#map{height:100%；}

而且你忘了初始化映射，所以当你使用

tileLayer.addTo（map）时

它无法将其添加到

映射

，因为没有

映射

，因此它会因您提到的错误而失败。这是您更新的plunker：

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