Question

由于某些原因，我必须将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>

Answer 1

好，我知道了。这是我所做的：

在data()

中创建地图变量

data() {
  return {
    map: undefined,
  }
},

使用mounted()

中的此功能进行设置

mounted() {
  this.$refs.mapRef.$mapPromise.then((map) => {
    this.map = map;
    this.init();
  });
},

现在，鲍勃是你的叔叔，您可以在任何需要的地方使用this.map

methods: {
  init() {
    new this.google.maps.Marker({
      position: {
        lat: 0,
        lng: 0
      },
      map: this.map,
    });
  },
}

如何将“ new google.maps.Marker（）”与“ vue2-google-maps”一起使用

1 个答案: