Question

我有一张地图，根据按钮的点击显示或隐藏。我在隐藏地图时添加地图，添加图层，添加标记，然后为标记调用fitBounds()。

我的问题是，当隐藏地图时，fitBounds不起作用。切换到可见后，将显示地图但完全缩小。当我再次拨打fitBounds时，地图会正确显示。

我如何知道地图准备好了？我尝试了mapReady，但在隐藏地图时也会调用它。

还有其他办法吗？

谢谢！

Answer 1

我如何知道地图何时准备就绪？

FWIW，确实是map.whenReady(callback)执行你的回调。

您的问题可能与地图没有准备好有关（正如您所知，地图即使在隐藏时也已准备就绪），但事实上它最初是隐藏的，因此它（地图容器）没有它最终尺寸。它需要大小（高度和宽度），因为它会影响您的map.fitBounds()。

您可能只需要在显示地图后致电map.invalidateSize()并重新执行fitBounds。

另请参阅：Data-toggle tab does not download Leaflet map

Answer 2

您可以轻松创建具有宽度和高度的有效div。另外，您需要将其设置为绝对值。然后，将该div添加到显示的相对位置。就是这样。

<div style="display: block; position: relative; overflow: hidden;">
   <div style="display: absolute; width: 100px; height: 100px; left: -1000px; top: -1000px;" id="map"></div>
</div>

那可能就够了

隐藏时如何正确初始化地图？

2 个答案: