Как использовать `new google.maps.Marker ()` с `vue2-google-maps` - PullRequest
Новая
       34

Как использовать `new google.maps.Marker ()` с `vue2-google-maps`

0 голосов
/ 21 апреля 2019

По некоторым причинам я должен использовать new google.maps.Marker() с vue2-google-maps, но я не знаю, как начать, так как документы и многие люди вместо этого используют <GmapMarker ... /> в части HTML.

Я пытался выполнить поиск, но документ не покрывает это.

Прямо сейчас мой код выглядит следующим образом, в нем нет ошибок, но он также не работает (карта присутствует, но маркер не отображается): 

<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>

1 Ответ

0 голосов
/ 21 апреля 2019

Хорошо, я разобрался.Вот что я сделал:

Создание переменной карты в 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,
    });
  },
}
...