第二张传单地图无法正确呈现

Question

我有 2 个选项卡，每个选项卡都有一张传单地图。第一张地图渲染正确，但第二张地图只显示一个图块（其余为灰色）并且地图未以正确区域为中心。我究竟做错了什么？谢谢

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

Answer 1

编辑：

如果包含您的第二张地图的 div 未显示（我猜它在 "tab" 中，带有 displayed: none; CSS / 样式），Leaflet 将不会能够正确确定地图容器的大小。

然后一旦你的第二张地图被显示出来，它的容器大小就会改变，但是 Leaflet 没有意识到并且仍然使用以前的大小。

您可以在地图显示后简单地调用 map2.invalidateSize()，这样 Leaflet 现在会用瓷砖覆盖新区域。

您还需要重新设置视图（使用 setView 或 fitBounds 或您喜欢的任何方法），因为之前使用的是不正确的容器边界。

演示：http://jsfiddle.net/ve2huzxw/52/

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

原回答：

欢迎来到 SO！

你真的使用了两次 L.map(location)，同一个 location？

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

这可能是一个错字，不是吗？

第二张传单地图无法正确呈现

2nd leaflet map not rendering correctly

leaflet