2

Google マップを作成するカスタム ディレクティブを作成しました。

Vue.directive('gmap', {
  inserted: function (el) {
    return new google.maps.Map(el, {
      center: { lat: -34.397, lng: 150.644 },
      zoom: 8
    })
  }
})

<div v-gmap ref="map" style="height: 360px"></div>

それは機能し、地図を見ることができます。

次に、地図上にマーカーを描画したいので、Google マップ オブジェクトが必要です。

v-gmap ディレクティブから戻り値を取得できますか?

mounted () {
    const map = this.$refs.map

    const marker = new google.maps.Marker({
      position: { lat: -34.397, lng: 150.644 },
      map: map,
      title: 'Hello World!'
    });
  }

うまくいきません。

map は単なる HTML 要素です。

4

1 に答える 1