GeoLoc.vue

<template>
  <Page class="page">
    <ActionBar class="action-bar">
      <Label class="action-bar-title" text="Geolocation Demo"></Label>
    </ActionBar>

    <StackLayout>
      <Button text="Show location" @tap="enableLocationServices"
              :visibility="currentGeoLocation.latitude ? 'collapsed' : 'visible'"/>
      <StackLayout :visibility="currentGeoLocation.latitude ? 'visible' : 'collapsed'">
        <Label :text="'Latitude: ' + currentGeoLocation.latitude"/>
        <Label :text="'Longitude: ' + currentGeoLocation.longitude"/>
        <Label :text="'Altitude: ' + currentGeoLocation.altitude"/>
        <Label :text="'Direction: ' + currentGeoLocation.direction"/>
      </StackLayout>
    </StackLayout>

  </Page>
</template>

<script>
  const geoLocation = require("nativescript-geolocation");

  export default {
    data() {
      return {
        currentGeoLocation: {
          latitude: null,
          longitude: null,
          altitude: null,
          direction: null
        },
      }
    },
    methods: {
      showLocation () {
        console.log('lol')
        geoLocation.watchLocation(location => {
          console.log(location)
          this.currentGeoLocation = location;
        }, error => {
          alert(error);
        }, {
          desiredAccuracy: 3,
          updateDistance: 10,
          minimumUpdateTime: 1000 * 1
        });
      },
      enableLocationServices () {
        console.log('lolez') // called
        geoLocation.isEnabled().then(enabled => {
          console.log(enabled) // False, why ?
          if (!enabled) {
            geoLocation.enableLocationRequest().then(() => this.showLocation());
          } else {
            this.showLocation();
          }
        });
      }
    }
  }
</script>
<template>
  <Page class="page">
    <ActionBar class="action-bar">
      <Label class="action-bar-title" text="Geolocation Demo"></Label>
    </ActionBar>

    <StackLayout>
      <Label v-if="needLocation" text="Looking up your location..." />
      <Label v-if="locationFailure" text="Sorry, I failed! :(" />
      <Label v-if="location" :text="locationDescription" textWrap="true" />
    </StackLayout>
  </Page>
</template>

<script>
  import * as Geolocation from 'nativescript-geolocation';

  export default {
    data () {
      return {
        needLocation: true,
        locationFailure: false,
        location: null
      }
    },
    computed: {
      locationDescription () {
        return `You are at ${this.location.latitude}, ${this.location.longitude}. Your altitude is ${this.location.altitude}.`;
      }
    },
    created() {
      Geolocation.enableLocationRequest(true)
        .then(() => {
          Geolocation.isEnabled().then(isLocationEnabled => {
            console.log('result is ' + isLocationEnabled);
            if(!isLocationEnabled) {
              this.needLocation = false;
              this.locationFailure = true;
              return;
            }

            Geolocation.getCurrentLocation({})
              .then(result => {
                console.log('loc result ', result);
                this.needLocation = false;
                this.location = result;
              })
              .catch(e => {
                console.log('loc error', e);
              });
          });
        });
    }
  };
</script>