Obtención de la posición del marcador después de arrastrar el componente basado en Laravel-VUE -- laravel campo con google-maps campo con vue.js camp Relacionados El problema

Getting Position of Marker After Dragging Laravel-VUE based component


1
vote

problema

Español

estoy usando vue-google-maps

Ellos funcionan bien hasta ahora, quiero lograr que cuando alguien busque y seleccione su área que aparezca un marcador y luego pueden arrastrarlo a su posición requerida.

Hace hasta ahora logró hacer que el marcador sea arrastre meditando el archivo 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>   

Ahora puedo arrastrar el marcador, sin embargo, las coordenadas (Lat: Long) no cambian.

Estoy usando Laravel 1.4.1 VUE 3.0.0-BETA.6

por favor ayuda

Resto del googlemap.VUE Parece así

  <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>   
Original en ingles

I am using vue-google-maps

They working good so far, I want to achieve that when someone search and select their area a marker appears and then they can drag it to their required position.

I have so far managed to make the marker draggable by editing GoogleMap.vue file

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

Now I am able to drag the marker however the coordinates (lat:long) doesn't change.

I am using Laravel 1.4.1 Vue 3.0.0-beta.6

Please help

rest of the GoogleMap.vue look like this

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

Lista de respuestas

2
 
vote
vote
La mejor respuesta
 

Para obtener la posición de marcador una vez que se arrastra Marker.dragend es mejor adecuado, entonces < Código> Marker.drag :

Este evento se enciende cuando el usuario detiene arrastrando el marcador.

En el caso de la posición de marcador de la biblioteca VUE-Google-Maps se podría determinar Me gusta esto:

  <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()); }   

Dónde evt es una MouseEvent objeto y import { Injectable, Compiler, Injector } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class LazyComponentService { private componenttRefs = { myFirstLazyModuleId: import('../path/to/first/lazy/module/component.module'), mySecondLazyModuleId: import('../path/to/second/lazy/module/component.module') }; constructor( private compiler: Compiler, private injector: Injector, ) { } async loadComponent(moduleId, container) { let ref; try { const moduleObj = await this.componenttRefs[moduleId]; const module = moduleObj[Object.keys(moduleObj)[0]]; const moduleFactory = await this.compiler.compileModuleAsync(module); const moduleRef: any = moduleFactory.create(this.injector); const componentFactory = moduleRef.instance.resolveComponent(); ref = container.createComponent(componentFactory, null, moduleRef.injector); } catch (e) { console.error(e); } return ref; } } 0 La propiedad contiene la posición del marcador arrastrado

Lo mismo se aplica a import { Injectable, Compiler, Injector } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class LazyComponentService { private componenttRefs = { myFirstLazyModuleId: import('../path/to/first/lazy/module/component.module'), mySecondLazyModuleId: import('../path/to/second/lazy/module/component.module') }; constructor( private compiler: Compiler, private injector: Injector, ) { } async loadComponent(moduleId, container) { let ref; try { const moduleObj = await this.componenttRefs[moduleId]; const module = moduleObj[Object.keys(moduleObj)[0]]; const moduleFactory = await this.compiler.compileModuleAsync(module); const moduleRef: any = moduleFactory.create(this.injector); const componentFactory = moduleRef.instance.resolveComponent(); ref = container.createComponent(componentFactory, null, moduleRef.injector); } catch (e) { console.error(e); } return ref; } } 111111 Evento.

 

To get marker position once it is dragged Marker.dragend is better suited then Marker.drag:

This event is fired when the user stops dragging the marker.

In case of vue-google-maps library marker position could be determined like this:

<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()); } 

where evt is a MouseEvent object and MouseEvent.latLng property contains the position of dragged marker

The same applies to @drag event.

 
 

Relacionados problema

5  Ng-init angular como para VUEJS  ( Angular ng init like for vuejs ) 
i im usando vuevs y algún tiempo necesito crear nuevas variables en la plantilla. en angular puedo ir: <div ng-app="" ng-init="myText='Hello World!'"> ...

3  Token del portador indefinido con la configuración global de Axios  ( Bearer token undefined with global axios config ) 
He creado una aplicación VUE usando Axios. Instalé Axios a través de la instalación de la dependencia de VUE UI. En mi archivo main.js , agregué una configur...

3  NUXT Asyncdata Axios en Actualizar pierde el token de autenticación  ( Nuxt asyncdata axios on refresh loses auth token ) 
Estoy llamando a una API de obtención que obtiene una matriz de datos de correo. Funciona bien en el cartero. Cuando uso el método de Asyncdata para obtener l...

0  'Bloqueado por la política de CORS', pero el encabezado está presente  ( Blocked by cors policy but header is present ) 
He creado una API de descanso usando IR y <li>0 y una frontend usando VUE. Cada vez que hago una solicitud de API, recibo el error <li>111 en la consola d...

1  Laravel usando vueify  ( Laravel using vueify ) 
Estoy tratando de usar Vueify en mi primer proyecto de Laravel y no estoy seguro de por qué no funciona. He instalado (a través de NPM), ambos módulos Vueify ...

1  onclick múltiples elementos en Vue JS  ( Onclick multiple elements in vue js ) 
Estoy creando una función para ocultar y mostrar la descripción de las miniaturas de la imagen (si el usuario hace clic en la miniatura de la imagen, la descr...

0  Cómo generar datos JSON en VUE con tabla HTML  ( How to generate json data in vue with html table ) 
Quiero generar datos en filas individuales, pero hay algo en mi código, eso no funciona. Tengo una serie de objetos en JSON y para imprimir eso en la tabla HT...

1  Rails 5.2 Devolución 406 con solicitud de Axios  ( Rails 5 2 returning 406 with axios request ) 
Tengo una API de rieles en los rieles 5.2 y una frontend en VUEJS, utilizando Axios para solicitar API. Cuando solicito con cartero en la ruta [Obtenga] h...

0  VUE-router ¡Enlace con el parámetro (error en la actualización?)  ( Vue router linking with parameter error on refresh ) 
¿Por qué cuando me dirija a un "enlace enrutador" a un componente con un parámetro, el parámetro funciona, pero luego cuando actualice la página no lo hace? (...

0  ¿Puedes cambiar dinámicamente el video basado en el estado VUEX?  ( Can you dynamically change the video based on vuex state ) 
Tengo una pequeña aplicación web, se anula como facetime. Quiero cambiar los elementos de video a través de un botón "Siguiente" que actualizará un valor en V...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos