Google Map自定义标记不可拖动

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


bai0131 回答:Google Map自定义标记不可拖动

我猜您正在使用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

本文链接:https://www.f2er.com/3154180.html

大家都在问