Run the method of the Vue component after the exte

2020-03-31 08:46发布

站内问答 / JavaScript
1033 2 5

I am using google maps API, and have created a Component to display the map.

index.html:

<!DOCTYPE html>
<html>
<head>
    ...
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script>
window.show_google_map = false;
console.log(window.show_google_map);
function initMap() {
    console.log('map loaded');
    window.show_google_map = true;
    console.log(window.show_google_map);
}
</script>
<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=googleapikeyxxxx&callback=initMap"
        type="text/javascript"></script>
</body>
</html>

GoogleMap.vue:

<template>
    <div class="google_map" :id="map_name"></div>
</template>

<script>
    export default {
        name: 'google_map',
        props: ['map_id'],
        data() {
            return {
                map_name: this.map_id + '-map',
            }
        },
        methods: {
            create_map() {
                const element = document.getElementById(this.map_name);
                const options = {
                    zoom: 14,
                    center: new google.maps.LatLng(51.501527, -0.1921837)
                };
                const map = new google.maps.Map(element, options);
                const position = new google.maps.LatLng(51.501527, -0.1921837);
                const marker = new google.maps.Marker({
                    position,
                    map
                });
            }
        },
        mounted() {
            this.create_map();
        }
    }
</script>

The problem is, the component is rendered before the google maps API is loaded. How can I display after the google maps API has been loaded?

2条回答
时光不老，我们不散
2楼-- · 2020-03-31 09:20

If I were you, I'd create a property on the data object called googleMapsReference and assign window.google to it. Then use a watcher to check the value of it with typeof. If it's undefined then you know it hasn't loaded. If you get 'object' then you know it has and you can call the function to create map.

Sorry I'd write code but I'm on my phone.

Here's documentation: https://vuejs.org/v2/guide/computed.html

查看更多
0人赞 添加讨论(0) 举报
时光不老，我们不散
3楼-- · 2020-03-31 09:29

Use the vue.mounted lifecycle method and load the gmaps script manually when the component is mounted for the first time. This way you can kickstart your code after the gmaps api was loaded (works even well for google auth api)

mounted: function () {
    if (window.google && window.google.maps) {
        this.create_map();
        return;
    }

    var self = this;
    var script = document.createElement("script");
    script.onload = function () {
        if (!window.google && !window.google.maps)
            return void (console.error("no google maps script included"));

        self.create_map();
    };

    script.async = true;
    script.defer = true;
    script.src = "https://maps.googleapis.com/maps/api/js?key=googleapikeyxxxx&callback=initMap";
    document.getElementsByTagName("head")[0].appendChild(script);
}
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)