数据切换选项卡无法下载传单地图

Question

Answer 1

如果您的 Leaflet 地图 在调整浏览器窗口大小后突然正常工作，那么您会遇到经典的“地图初始化时地图容器大小无效”：为了正常工作，Leaflet 会在初始化时读取地图容器大小地图(

L.map("mapContainerId")

)。

如果您的应用程序隐藏该容器（通常通过 CSS

display: none;

，或某些框架选项卡/模态/其他......）或稍后更改其尺寸，Leaflet 将不会知道新的尺寸。因此它不会正确渲染。通常，它仅下载它认为显示的容器部分的图块。如果容器在地图初始化时完全隐藏，则这可以是左上角的单个图块。

将地图容器嵌入“选项卡”或“模态”面板时经常会出现此错误，可能使用流行的框架（Bootstrap、Angular、Ionic 等）。

Leaflet 监听浏览器窗口大小调整事件，并在事件发生时再次读取容器大小。这解释了为什么地图突然在调整窗口大小时起作用。

您还可以在显示选项卡面板时通过调用

map.invalidateSize()

来手动触发此更新（例如，在选项卡按钮单击上添加侦听器），至少在第一次以正确的尺寸渲染容器时是如此。

至于实现选项卡按钮单击侦听器，请对该主题执行新的搜索：对于大多数流行的框架，您应该有足够的可用资源。

Answer 2

首先，感谢@ghybs 对为什么在这些情况下传单地图未正确显示的良好解释。

对于那些尝试@ghybs的答案失败的人，您应该尝试调整浏览器的大小，而不是调用地图对象的方法：

window.dispatchEvent(new Event('resize'));

正如@MarsAndBack所说，此修复可能会导致Leaflet的invalidateSize提供的平移/动画/等功能出现问题。

Answer 3

我遇到这个问题是因为我使用了

modal

bootstarp。无论如何它都没有解决。我尝试了

map.invalidateSize()

和

window.dispatchEvent(new Event('resize'));

但没有修复。

最终解决了这个问题：

$('#map-modal').on('shown.bs.modal', function(event) {});

'shown.bs.modal'

事件意味着当模态完全加载并且大小没有任何混淆时，现在在其中编写您的代码。

Answer 4

对于像我这样的人，无法通过珍贵的@ghybs 解释（

map.invalidateSize()

）解决这一挑战，并且能够通过@gangai-johann 来解决这一挑战，您仍然有机会以正确的方式做到这一点。将无效指令放入 setTimeout 内，因为分派该指令可能为时过早。

setTimeout(() => {
    this.$refs.mymap.mapObject.invalidateSize()
}, 100)