0

Hola implemente google maps a mi proyecto en vue y laravel, lo que quiero es obtener los datos de la latitud y longitud, seguí este blog http://cristiantorresalfaro.blogspot.com/2020/08/mostrar-ubicacion-en-google-map-vue-js.html si me muestra el mapa, lo unico que falta serian los valores, para poder guardarlo en mi base de datos, ayuda porfavor. Así lo tengo: introducir la descripción de la imagen aquí

Y así es el código de mi archivo googleMap.vue

<template>
  <gmap-map
    :center="center"
    :zoom="16"
    style="width: 100%; height: 250px"
  >
    <gmap-marker
      :key="index"
      v-for="(m, index) in markers"
      :position="m.position"
      :title="m.title"
      :clickable="true"
      :draggable="true"
      @click="center=m.position"
    ></gmap-marker>
  </gmap-map>
</template>
<script>
  export default {
    data () {
      return {        
        center: {lat: this.latitude, lng: this.longitude},
        markers: [{
          position: {lat: this.latitude, lng: this.longitude},
        }]
      }
    },

    props: {
        latitude: Number,
        longitude: Number,
        title: String
    }
  }
</script>

Solo me muestra datos de mi archivo CrearFacturaComponent, también quisiera que se muestre lo del archivo googleMap.vue introducir la descripción de la imagen aquí

1 respuesta 1

2
  1. Para que vue devtools lea tu componente map, debes especificarle un nombre válido dentro del export default, como se muestra en el ejemplo: name : 'Map'
  2. Tengo el mismo problema, no he podido obtener latitud y longitud, pero haciendo varias pruebas y usando el evento bounds_changed, podemos obtener estos resultados, pienso que pueden ser útiles para de alguna forma calcular/obtener ubicación.

// vue2-google-maps con Nuxt 2.15.3

<template>
 <gmap-map
  //...
  @bounds_changed="setCoordinates"
  @dragend="coordinates"
 >
  <gmap-marker> </gmap-marker>
       
</gmap-map>
</template>
    <script>
export default {
  name: 'Map',
  
 data() {
    return {
     coordinatesMap: null,
    }
  },

 methods: {
     setCoordinates(newCoordinates) {
      this.coordinatesMap = newCoordinates
    },
    coordinates() {
      //Do something
      console.log(this.coordinatesMap.Ab)
      console.log(this.coordinatesMap.Ua)
    },
  },
}
</script>
// Console
{
"h": 47.371524727114014,
"j": 47.395845736123185
}
{
"h": -1.2169070898230872,
"j": -1.183604782694181
}
/** Datos relacionados, según el contenido del objeto al copiar directo de consola **/
{
"south": 47.371524727114014,
"west": -1.2169070898230872,
"north": 47.395845736123185,
"east": -1.183604782694181
}

introducir la descripción de la imagen aquí

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.