加载外部脚本后运行Vue组件的方法 [英] Run the method of the Vue component after the external script is loaded
本文介绍了加载外部脚本后运行Vue组件的方法的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用谷歌地图API，并创建了一个组件来显示地图。
I am using google maps API, and have created a Component to display the map.
index.html：
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：
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>
问题是，组件是在加载google maps API之前呈现的。如何在加载Google Maps API后显示？
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?
推荐答案
使用vue.mounted生命周期方法并加载gmaps脚本第一次安装组件时手动。这样你就可以在加载gmaps api后启动你的代码（对于google auth api来说效果很好）
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);
}
这篇关于加载外部脚本后运行Vue组件的方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
