如何检测由于加载图像缓慢而调整地图容器的大小?

问题描述

我正在使用 Vue2Leaflet 插件在 Nuxt 中创建一个带有 Leaflet 地图的应用。

我遇到了一个问题:我正在使用 Bootstrap 列来调整地图和随附图像的大小,但是图像加载速度太慢(目前无法解决),因此在映射时容器的大小不正确加载。

这会导致地图呈半灰色。我曾尝试在挂载的事件中调用 map.invalidateSize(),但即使这样也必须在图像加载完成之前发生。

我在以下位置设置了一个沙箱:https://codesandbox.io/s/eager-bohr-c3453?file=/src/App.vue

要查看错误,您必须在 https://c3453.csb.app/ 处查看渲染的应用程序(内部代码和框渲染未显示问题)

我想我需要一些方法来等待图像完成加载(所以 BS col 是正确的大小),然后调用 map.invalidateSize(),但我不确定如何...

解决方法

您可以在 onload 上附加 <img> 侦听器,以便您可以(再次?)调用 Leaflet 地图 invalidateSize() 方法。