Geolocation watchPosition on VueJS: why my code doesnt work?


#1

HI everyone,

Trying to make geolocation watchPosition work on one of my components using Vue but after testing I always get single coordinate values which never update. I think I am missing something?

So far not sure if the problem is my code or the data source? I am testing without Wi-Fi and the problem stay there.

It is likely I will ask more questions about how Vue works after getting your answers - hoping to understand Vue properly.

Below a copy of my code:

       data() {
              return {
                mymarker:{
                               currentPosition : { lat : 0, lng : 0},  
                          },
                     }
         },
       mounted : function() {
                this.myposition()
              },
        
        methods: {
            myposition : function() {
                if (navigator.geolocation) {
                    navigator.geolocation.watchPosition(
                                 this.successPosition,
                                 this.failurePosition, 
                                {
                                 enableHighAccuracy: false,
                                 timeout:1000,
                                maximumAge: 4000
                    });
                }else{
                    document.getElementById("resulttest").innerHTML = "Your browser does not support Geolocation API!!!";
                }
            },
            successPosition: function(position){
                    this.mymarker.currentPosition = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };
            },
            failurePosition: function(err){
                alert("Error Code: " + err.code + " Error Message: " + err.message);
            },
        },

thanks in advance


#2

I think your’ code is good, so maybe the test device? Try testing on a few different devices in different situations to see if you get the same results.


#3

my code works well

<template>
  <div id="tracking">
    <googlemaps-map ref="map" class="map" :center.sync="centerPosition" :zoom.sync="zoom">
      <googlemaps-marker
        v-for="(position, index) in positions"
        :key="index"
        title="current position"
        :position="position"
        icon="statics/icons/marker-icon.png"
      />
    </googlemaps-map>
  </div>
</template>
<script>
import Vue from 'vue'
import 'vue-googlemaps/dist/vue-googlemaps.css'
import VueGoogleMaps from 'vue-googlemaps'
Vue.use(VueGoogleMaps, {
  load: {
    apiKey: '<insert your key>',
    libraries: ['places'],
    useBetaRenderer: false,
  },
})
export default {
  components: {
    VueGoogleMaps,
  },
  methods: {
    trackPosition() {
      if (navigator.geolocation) {
        navigator.geolocation.watchPosition(this.successPosition, this.failurePosition, {
          enableHighAccuracy: true,
          timeout: 15000,
          maximumAge: 0,
        })
      } else {
        alert(`Browser doesn't support Geolocation`)
      }
    },
    successPosition: function(position) {
      this.positions.push({
        lat: position.coords.latitude,
        lng: position.coords.longitude,
      })
      this.centerPosition = {lat: position.coords.latitude, lng: position.coords.longitude}
    },
    failurePosition: function(err) {
      alert('Error Code: ' + err.code + ' Error Message: ' + err.message)
    },
  },
  computed: {},
  data: () => ({
    centerPosition: {
      lat: 10.762622,
      lng: 106.660172,
    },
    zoom: 16,
    positions: [],
  }),
  mounted() {
    this.trackPosition()
  },
}
</script>
<style scoped lang="stylus">
#tracking
  height 100%
.map
  flex 100% 1 1
  width 100%
  height 100%
</style>

#4

Hmmm… ok @JamesThomson thanks for the answer. I will follow your advice. I found @nguyenduyphong code above and it is not too different than mine…


#5

Thanks to you both!