google-maps - 谷歌地图自定义标记不可拖动

Question

我在 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";

标签： google-mapsvue.jsvuejs2vue-component

Answer 1

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

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

这是一个演示