0
Ich verwende Google Maps-API und habe eine Komponente erstellt, um die Karte anzuzeigen.Führen Sie die Methode der Vue-Komponente aus, nachdem das externe Skript geladen wurde
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>
Das Problem ist, wird das Bauteil, bevor die API geladen wird Google-Karte gemacht wird. Wie kann ich anzeigen, nachdem die Google Maps-API geladen wurde?
Ja, ich versuche es so. Die berechnete Eigenschaft wird jedoch nicht ausgelöst, wenn sie geladen wird. Ich habe meine Frage aktualisiert. Bitte guck dir das an. – Kakar
Oh, ich schlug keine berechnete Eigenschaft vor. Eher ein Beobachter. Es ist anders als eine berechnete Eigenschaft, dass es in zwei Richtungen gebunden ist. –
Sie können keine Variable beobachten, die nicht definiert ist. – Reiner