Leaflet 第二张传单地图渲染不正确

我有两个标签，每个标签都有一张传单地图。第一个贴图正在正确渲染，但第二个贴图仅显示1个平铺（其余为灰色），并且贴图未位于正确区域的中心。我做错了什么？谢谢

  var map = L.map('tab-1').setView([latitude, longitude], 5);

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

  var map2 = L.map('tab-2').setView([latitude, longitude], 5);

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

var-map=L.map（'tab-1'）.setView（[纬度，经度]，5）；
L.tileLayer（'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png？access_token={accessToken}'{
属性：“地图数据©；贡献者，图像©”，
maxZoom:18，
id:“”，
accessToken:“”
}).addTo（地图）；
var map2=L.map（'tab-2'）.setView（[纬度，经度]，5）；
L.tileLayer（'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png？access_token={accessToken}'{
属性：“地图数据©；贡献者，图像©”，
maxZoom:18，
id:“”，
accessToken:“”
}).addTo（map2）；

编辑：

如果包含第二张地图的div没有显示（我猜它在一个“选项卡”内，显示

displated:none；

CSS/style），传单将无法正确确定地图容器的大小

然后，一旦你的第二张地图被显示，它的容器大小会改变，但传单并没有意识到，仍然使用以前的大小

一旦地图被显示，你们可以简单地打电话，这样传单就可以用瓷砖覆盖新的区域

您还需要重新设置视图（使用

setView

或

fitBounds

或您喜欢的任何方法），就像以前使用不正确的容器边界所做的那样

演示：

（取消注释第21行并重新运行以获得正确的行为）

---

原始答复：

欢迎来到SO

您是否真的使用了两次

L.map（location）

，并且使用了相同的

位置

在我看来，传单会试图在同一个容器中创建两个地图。我想这会产生意想不到的结果

---

这可能是打字错误，不是吗？

谢谢。不，不是同一个地方。这是个打字错误。我会编辑这篇文章。如果你还没有找到，我想你只需要在打开第二个选项卡后调用

map2.invalidateSize（）

。不确定这里是否有足够的信息来帮助你…你能在线重现你的问题吗？（例如，开）