如何修复无法读取类星体Vue谷歌地图上的空属性"地图"？

Question

如何解决此问题无法读取null的属性"maps"，当我调用initMap以使用这行代码将地图居中时，

const map = new this.google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: this.property
})

我已经在计算中定义了这个.google，但它不起作用。这就是我所做的

<template>
<q-layout view="hhh lpr fff" class="main-layout">
<q-page-container>
<GmapMap
id="map"
ref="mapRef"
:center="{lat:-7.250445, lng:112.768845}"
:zoom="13"
map-type-id="terrain"
style="width: 1000px; height: 600px; margin-left:100px"
>

</GmapMap>
<router-view />
</q-page-container>
</q-layout>
</template>
<script>
import * as VueGoogleMaps from 'vue2-google-maps'
export default {
name: 'DefaultLayout',
data () {
return {
mapName: "map",
property: {
lat: 1.28237,
lng: 103.783098
},
}
},
computed: {
google: VueGoogleMaps.gmapApi
},
mounted () {
this.initMap();
},
methods: {
initMap() {
const map = new this.google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: this.property
})

},
},
}
</script>
<style>
</style>

有人能帮我解决这个问题吗？

Answer 1

Computed属性应该是getter函数。我想你不需要计算财产。您可以使用initMap方法制作所有内容，例如

initMap() {
if(VueGoogleMaps) {
new VueGoogleMaps.gmapApi.maps.Map(document.getElementById('map'), {
zoom: 13,
center: this.property
})
}
}