vue3未绘制地图的Vue传单

Question

我使用"@vue-leaflet/vue-leaflet": "^0.6.1"来显示我的Laravel项目的地图。

但有件事很奇怪。地图未被完全渲染。

我的组件代码：

        <div class="tab-pane fade" id="nav-map" role="tabpanel" aria-labelledby="nav-map-tab" style="height:500px;">
            <l-map ref="map" :zoom="13" :center="[-3.6968561, 103.4372309]">
                <l-tile-layer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" layer-type="base" name="OpenStreetMap">
                </l-tile-layer>
            </l-map>
        </div>

设置代码：

import "leaflet/dist/leaflet.css"
import { LMap, LTileLayer, LMarker } from '@vue-leaflet/vue-leaflet'

export default {
    components: {
        LMap,
        LTileLayer,
        LMarker
    },

结果映射类似于这个屏幕截图(没有完全加载)。

​

但是，如果我右键单击“页面”，并选择“浏览器上的检查元素”或调整浏览器窗口的大小，则地图将突然变为满载，控制台中没有错误日志。

开启检查元件后：

​

更新:我已经尝试使用原始传单，并遵循本教程。但结果也是一样的。对于第一次加载，映射没有完全加载。

Answer 1

修正了在invalidateSize之前运行setView映射

setTimeout(function () {
                myMap.invalidateSize()
                myMap.setView([51.505, -0.09], 13)
            }, 1000)