时间戳

首页 > 解决方案 > 使用 vue 路由器从另一个组件加载谷歌地图

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

问题描述

我有一个关于谷歌地图加载的问题。事情是在#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>

map.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>

标签： google-mapsvue.jsvue-router

解决方案

Vue Cookbook有一个加载 google maps 的示例，它使用google-maps-api-loader将加载过程包装到一个 Promise 中。来自加载器的承诺被await编辑在mount消费组件的钩子中。

这是一个演示该方法的代码框。

推荐阅读