Question

到目前为止，他们的工作情况很好，我想实现的目的是，当有人搜索并选择他们的区域时，会出现一个标记，然后将其拖动到所需位置。

到目前为止，我已经设法通过编辑GoogleMap.vue文件使标记可拖动

<gmap-marker 
    :key="index"

    v-for="(m, index) in markers"
    :position="m.position"
    :draggable="true"
    @click="center=m.position"
    @drag="setCurrent(this)"

  ></gmap-marker>

现在我可以拖动标记，但是坐标（lat：long）不变。

我正在使用Laravel 1.4.1 Vue 3.0.0-beta.6

请帮助

GoogleMap.vue的其余部分看起来像这样

<script>
   export default {
   name: "GoogleMap",
   data() {
    return {

      center: { lat: 24.9004057, lng: 67.1926178 },
      markers: [],
      places: [],
      currentPlace: null,

     };
    },

   mounted() {

 this.geolocate();

},

   methods: {

    // receives a place object via the autocomplete component
    setPlace(place) {
      this.currentPlace = place;
      this.addMarker();
    },

addMarker() {

  if (this.currentPlace) {
    const marker = {
      lat: this.currentPlace.geometry.location.lat(),
      lng: this.currentPlace.geometry.location.lng()
    };
    this.markers.push({ position: marker, draggable: true });
    this.places.push(this.currentPlace);
    this.center = marker;
    this.currentPlace = null;
  }
},

geolocate: function() {
  navigator.geolocation.getCurrentPosition(position => {
    this.center = {
      lat: position.coords.latitude,
      lng: position.coords.longitude
    };
  });
},

checkthis(position){

  console.log(navigator.position.getCurrentPosition());

 }

} 

};
</script>

Answer 1

要获得标记位置，请拖动Marker.dragend，然后再选择Marker.drag：

当用户停止拖动标记时触发此事件。

对于vue-google-maps库标记位置，可以这样确定：

<gmap-marker
    :draggable="true"
    :key="index"
    v-for="(m, index) in markers"
    :position="m.position"
    @click="center=m.position"
    @dragend="showLocation"
  ></gmap-marker>


showLocation: function(evt){
     console.log( evt.latLng.toString());
}

其中evt是MouseEvent object，而MouseEvent.latLng属性包含拖动标记的位置

@drag事件也是如此。

拖动基于Laravel-VUE的组件后获得标记的位置

1 个答案: