在外部脚本加载后运行Vue组件的方法

我正在使用Google Maps API，并创建了一个组件来显示地图。在外部脚本加载后运行Vue组件的方法

的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>

的问题是，在加载谷歌地图API之前该组件呈现。如何在Google Maps API加载后显示？

来源

2017-08-10 Kakar

如果我是你，我会在数据对象上创建一个名为googleMapsReference的属性并将它分配给window.google。然后用一个观察者用typeof检查它的值。如果它未定义，那么你知道它没有加载。如果你得到'对象'，那么你知道它有，你可以调用函数来创建地图。

对不起，我会写代码，但我在我的手机上。

这里的文档：https://vuejs.org/v2/guide/computed.html

来源

2017-08-10 05:09:35

是的，我想这样的。但是，计算的属性在加载时不会触发。我更新了我的问题。请看一看。 – Kakar

哦，我没有提出一个计算属性。而是一个观察者。它与计算的属性不同，它是双向的。 –

您无法观看未定义的变量。 – Reiner

使用vue.mounted生命周期方法和加载gmaps脚本手动当组件被安装在第一次。这样，gmaps API被加载后，您可以kickstart的代码（甚至工作以及对谷歌身份验证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); 
}

来源

2017-08-10 05:42:00 Reiner

在外部脚本加载后运行Vue组件的方法

回答

相关问题