загрузка карты Google из другого компонента с роутером vue - PullRequest
Новая
       5

загрузка карты Google из другого компонента с роутером vue

0 голосов
/ 16 июня 2020

У меня проблема с загрузкой карты Google. дело в том, что компонент #App читает компонент карты Google из <router-view>, но таким образом выдает ошибку: "ReferenceError: google is not defined". сначала я подумал, что мне не хватает чего-то внутри initMap(), но нет, потому что, если я попытаюсь вставить метод карты в app.vue, тогда карта Google будет работать без проблем.

Кстати, мой api находится внутри public/index.html 

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

карта . 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>

1 Ответ

0 голосов
/ 16 июня 2020

В Vue Cookbook есть пример для загрузки карт Google , который использует google-maps -api-loader , чтобы обернуть процесс загрузки в обещание. Обещание загрузчика await записано в хуке mount в компоненте-потребителе.

Вот поле codeandbox, демонстрирующее подход .

...