0
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は：Google MapsのAPIがロードされる前に
<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マップAPIが読み込まれた後、どのように表示できますか？
はい、私はそうしています。しかし、計算されたプロパティはロードされても起動しません。私は私の質問を更新しました。見てください。 – Kakar
ああ、私は計算されたプロパティを提案していませんでした。むしろウォッチャー。これは2ウェイ境界であるという計算されたプロパティとは異なります。 –
未定義の変数を見ることはできません。 – Reiner