繁体   English   中英

如何使用`new google.maps.Marker()`和`vue2-google-maps`

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM