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

Question

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

\n\n

  var map = L.map(\'tab-1\').setView([latitude, longitude], 5);\n\n  L.tileLayer(\'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}\', {\n    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 \xc2\xa9 <a href="http://mapbox.com">Mapbox</a>\',\n    maxZoom: 18,\n    id: \'\',\n    accessToken: \'\'\n  }).addTo(map);\n\n  var map2 = L.map(\'tab-2\').setView([latitude, longitude], 5);\n\n  L.tileLayer(\'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}\', {\n    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 \xc2\xa9 <a href="http://mapbox.com">Mapbox</a>\',\n    maxZoom: 18,\n    id: \'\',\n    accessToken: \'\'\n  }).addTo(map2);\n

\n

Answer 1

编辑：

\n\n

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

\n\n

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

\n\n

您只需map2.invalidateSize()在地图显示后调用即可，Leaflet 现在会用图块覆盖新区域。

\n\n

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

\n\n

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

\n\n

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

\n\n\n\n

原答案：

\n\n

欢迎来到SO！

\n\n

你真的用L.map(location)同样的东西两次吗location？

\n\n

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

\n\n

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

\n