vue2-google-mapsでロングタップイベントを実装

ロングタップはmousedownとmouseupで検知する

参考 https://maps.multisoup.co.jp/blog/294/

vue2-google-mapsのGmapMapコンポーネントで実現できない

以下はclickは動作するがmousedownは動作しない。

    <GmapMap
        ref="gmap"
        :center="latLng"
        :zoom="16"
        :options="options"
        style="width: 600px; height: 450px"
        @click="place($event)"
        @mousedown="place($event)"
    >

vue2-google-mapsのMapクラスイベント一覧にmousedown|mouseupイベントは存在しないため、GmapMapにイベントを設定しても動作しない。

Google Maps APIオブジェクトにバインドする

これで動く。

  data() {
    return {
      start: null,
      long_tap: 0.5 * 1000, // 0.5秒
      selected_latlng: null
    };
  },
  mounted() {
    let that = this;
    this.$refs.gmap.$mapPromise.then(() => {
      // mousedownとmouseupでロングタップを検知
      google.maps.event.addListener(this.$refs.gmap.$mapObject, 'mousedown', function () {
        that.start = moment();
      });
      google.maps.event.addListener(this.$refs.gmap.$mapObject, 'mouseup', function (event) {
        if (moment().diff(that.start) > that.long_tap) {
          // 緯度経度を設定
          that.selected_latlng = event.latLng;
        }
      });
    });
  },

Google Maps APIオブジェクトがロードされたあとにイベントリスナーに追加する必要があるため、
this.$refs.gmap.$mapPromise.thenの中に処理を書かないと動かない。