使用 vue 路由器从另一个组件加载谷歌地图

Question

我有一个关于谷歌地图加载的问题。事情在#App组件中阅读谷歌地图 来自<router-view> 的组件，但这样会给出错误："ReferenceError: google is not defined"。首先我以为我在initMap() 中遗漏了一些东西，但没有，因为如果我尝试将地图方法粘贴到app.vue 中，那么谷歌地图运行没有问题。

顺便说一句，我的 api 在 public/index.html 内

<script async defer src="https://maps.googleapis.com/maps/api/js?key=MY_API&callback=initMap"></script>

ma​​p.vue 组件：

<template>
    <div id="map" class="map"></div>
</template>
<script>
export default {
    mounted(){
        this.initMap();
    },
    methods: {
        initMap(){
            let options = {
                center: {lat: 34.693725, lng: 135.502254},
                zoom: 15,
                mapTypeId: "roadmap"
            };

            let map = new google.maps.Map(document.getElementById("map"), options);

        }
    }
}
</script>

那么您认为问题是什么以及如何使用 <router-view> 映射组件工作

Answer 1

Vue Cookbook 有一个example for loading google maps，它使用google-maps-api-loader 将加载过程包装成一个promise。 加载器的承诺是 awaited 在消费组件的 mount 钩子中。

这是codesandbox demonstrating the approach。