leaflet - 第二张传单 map 无法正确呈现

Question

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

  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

编辑:

如果包含您的第二张 map 的 div 未显示(我猜它在带有 displayed: none; CSS/style 的“选项卡”内)，Leaflet 将无法正确确定映射容器大小。

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

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

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

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

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

---

原答案:

欢迎来到 SO!

你真的使用了两次 L.map(location)，并且 location 相同吗？

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

这可能是一个拼写错误，不是吗？