谷歌地图自定义标记不可拖动答案

【问题标题】：Google Map Custom Marker not draggable谷歌地图自定义标记不可拖动
【发布时间】：2019-11-06 07:38:46
【问题描述】：

我在 Vue 组件中创建了一个 Google Map 自定义标记。我已设置 draggable = "true" 但标记不可拖动。如何使标记可拖动并在拖动后获取坐标？

/////////////////////////////////////////////////////////////
// basemap
<template>
  <div>
    <GmapMap :style="'height:500px'" :center="center" :zoom="zoom">
      <Location :location="location1"/>
    </GmapMap>
  </div>
</template>

////////////////////////////////////////////////////////
// Location
<template>
  <div>
      <GmapCustomMarker
        ref="editMarker"
        :marker="location.pos"
        :draggable="true"
        class="g_marker"
        alignment="center"
        :z-index="999"
      >
        <div style="background-color: red; width: 50px; height: 50px; border: 2px solid black;"></div>
      </GmapCustomMarker>
   </div>
</template>

<script>
import GmapCustomMarker from "vue2-gmap-custom-marker";

【问题讨论】：

您应该先将其包装在地图中。如果它只是一个标记并且周围没有地图，你想如何拖动它？
@Andor Németh 抱歉，它被包裹在地图上。这是位于另一个 BaseMap 组件内的 Location 组件。我会编辑这个问题。

标签： google-maps vue.js vuejs2 vue-component

【解决方案1】：

我猜你正在使用vue2-gmap-custom-marker package，对吧？如果是这样，它似乎不支持拖动选项。但下面的示例演示了如何将 可拖动标记 实现为 Vue 组件（基于 this example）：

<template>
  <div :draggable="true" :style="{'position': 'absolute'}">
    <slot />
  </div>
</template>
<script>
import * as VueGoogleMaps from "vue2-google-maps";
/* global google */
export default {
  mixins: [VueGoogleMaps.MapElementMixin],
  props: {
    position: {
      type: Object,
      default: undefined
    }
  },
  methods: {},
  data() {
    return {
      current: null,
      origin: null
    };
  },
  provide() {
    const self = this;

    return this.$mapPromise.then(map => {
      class Overlay extends google.maps.OverlayView {
        constructor(map) {
          super();
          this.setMap(map);
          self.current = new google.maps.LatLng(
            self.position.lat,
            self.position.lng
          );
        }
        draw() {
          const container = self.$el;
          let pos = this.getProjection().fromLatLngToDivPixel(self.current);
          container.style.left = pos.x + "px";
          container.style.top = pos.y + "px";
        }
        onAdd() {
          const container = self.$el;
          const panes = this.getPanes();
          panes.floatPane.appendChild(container);

          google.maps.event.addDomListener(
            self.$map.getDiv(),
            "mouseleave",
            () => {
              google.maps.event.trigger(container, "mouseup");
            }
          );

          google.maps.event.addDomListener(container, "mousedown", e => {
            container.style.cursor = "move";
            self.$map.set("draggable", false);
            self.origin = e;

            const mouseMoveHandler = google.maps.event.addDomListener(
              self.$map.getDiv(),
              "mousemove",
              e => {
                let left = self.origin.clientX - e.clientX;
                let top = self.origin.clientY - e.clientY;
                let pos = self.$overlay
                  .getProjection()
                  .fromLatLngToDivPixel(self.current);
                let latLng = self.$overlay
                  .getProjection()
                  .fromDivPixelToLatLng(
                    new google.maps.Point(pos.x - left, pos.y - top)
                  );
                self.origin = e;
                self.current = latLng;
                this.draw();
              }
            );

            google.maps.event.addDomListener(container, "mouseup", () => {
              self.$map.set("draggable", true);
              container.style.cursor = "default";
              google.maps.event.removeListener(mouseMoveHandler);
            });
          });
        }
        onRemove() {
          self.$el.remove();
        }
      }
      this.$overlay = new Overlay(map);
    });
  },
  destroyed() {
    this.$overlay.setMap(null);
    this.$overlay = undefined;
  }
};
</script>

Here is a demo

【讨论】：