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（我猜它在＆＃34;标签＆＃34;有displayed: none; CSS /样式），Leaflet将无法正确确定地图容器尺寸。

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

一旦显示地图，您就可以简单地调用map2.invalidateSize()，以便Leaflet现在用图块覆盖新区域。

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

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

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

原始答案：

欢迎来到SO！

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

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

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

第二张传单地图无法正确渲染

1 个答案: