[英]How to use `new google.maps.Marker()` with `vue2-google-maps`
出于某些原因,我必须使用new google.maps.Marker()
和vue2-google-maps
,但我不知道如何开始,因为文档和许多人在HTML部分中使用<GmapMarker ... />
代替。
我试图搜索但文档没有涵盖这个。
现在我的代码看起来像这样,它没有任何错误,但它也不起作用(地图存在但标记未显示):
<template>
<div style="height: 100%; width: 100%;">
<GmapMap
:center="{ lat: 0, lng: 0 }"
ref="mapRef"
>
</GmapMap>
</div>
</template>
<script>
import * as VueGoogleMaps from 'vue2-google-maps';
export default {
computed: {
google: VueGoogleMaps.gmapApi,
},
methods: {
init() {
new this.google.maps.Marker({
position: {
lat: 0,
lng: 0
},
map: this.$refs.mapRef,
});
}
},
async mounted() {
this.init()
},
}
</script>
好的,我想通了。 这是我做的:
在data()
创建一个map变量
data() {
return {
map: undefined,
}
},
在mounted()
使用此功能设置它
mounted() {
this.$refs.mapRef.$mapPromise.then((map) => {
this.map = map;
this.init();
});
},
现在,Bob是你的叔叔,你可以在任何你想要的地方使用this.map
methods: {
init() {
new this.google.maps.Marker({
position: {
lat: 0,
lng: 0
},
map: this.map,
});
},
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.