问题描述
我正在使用 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()
方法。