第二张传单地图未正确渲染

Question

我有 2 个标签，每个标签都有一张传单地图。第一张地图正确渲染，但第二张地图仅显示 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);

Answer 1

编辑：

如果包含您的第二张地图的 div 未显示（我猜它在带有displayed: none; CSS / 样式的“选项卡”内），Leaflet 将无法正确确定地图容器的大小。

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

一旦显示该地图，您只需致电map2.invalidateSize()，以便Leaflet 现在用瓷砖覆盖新区域。

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

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

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

---

原答案：

欢迎来到 SO！

你真的用过两次L.map(location)，和同一个location吗？

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

这应该是笔误吧？