I'm new to Ionic and Typescript so apologies if I have this arse about face !
Im trying to build a simple iOS and Android app with Ionic 2 that simply displays the users current location, updating as they move.
The issue I am facing is that whilst I appear to be getting the co-ordinate locations come through the UI never updates to display the updated location.
I have created a provider using the cordova-plugin-mauron85-background-geolocation plugin as location.ts:
import { Injectable, NgZone} from '@angular/core'; import { BackgroundGeolocation } from 'ionic-native'; @Injectable() export class LocationProvider { public message: any = "I'm new here"; public latitude:number = 0.0; public longitude:number = 0.0; private zone: NgZone; constructor() { this.initialiseLocationManager(); } initialiseLocationManager() { let config = { desiredAccuracy: 1, stationaryRadius: 1, distanceFilter: 1, interval:1000, activityType:'AutomotiveNavigation', debug: true, stopOnTerminate: true, }; BackgroundGeolocation.configure(config) .then(this.locationUpdated) .catch((error) => { console.log('BackgroundGeolocation error'); }); } private locationUpdated(location) { console.log('******* NEW LOCATION ********'); this.zone.run(() => { this.latitude = location.latitude; this.longitude = location.longitude; }); BackgroundGeolocation.finish(); // FOR IOS ONLY } private error(error) { console.log('ERROR'); } public startTracking() { BackgroundGeolocation.start(); } public stopTracking() { BackgroundGeolocation.stop(); } } I am then injecting this into my page test.ts:
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import {LocationProvider} from '../../providers/location/location'; @Component({ templateUrl: 'build/pages/test/test.html', }) export class TestPage { constructor(private nav: NavController, private locationProvider:LocationProvider) { } startTracking() { this.locationProvider.startTracking(); } stopTracking() { this.locationProvider.stopTracking(); } } My page content is then:
<ion-header> <ion-navbar> <button menuToggle> <ion-icon name="menu"></ion-icon> </button> <ion-title>Test</ion-title> </ion-navbar> </ion-header> <ion-content padding> <button (click)="startTracking()"> Start Tracking </button> <button (click)="stopTracking()"> Stop Tracking </button> <ion-item>Latitude / Longitude</ion-item> <ion-item> {{locationProvider.latitude}},{{locationProvider.longitude}} </ion-item> </ion-content> When I compile my app for iOS and run in Xcode it looks as I expect, when I click the "Start Tracking" button I see entries in the Xcode console that suggest the location is being obtained correctly i.e.
2016-08-06 12:37:17:370 Test[3264:62403] Better location found: Location: id=0 time=140310177131584 lat=51.8724580445 lon=-2.26443678245263 accu=5 aaccu=-1 speed=-1 head=-1 alt=0 type=current 2016-08-06 12:37:17:371 Test[3264:62403] LocationManager queue Location: id=0 time=140310177131584 lat=51.8724580445 lon=-2.26443678245263 accu=5 aaccu=-1 speed=-1 head=-1 alt=0 type=current 2016-08-06 12:37:18:370 Test[3264:62403] LocationManager didUpdateLocations (operationMode: 1) 2016-08-06 12:37:18:370 Test[3264:62403] Location age 0.001122 2016-08-06 12:37:18:370 Test[3264:62403] Better location found: Location: id=0 time=140310177372752 lat=51.8726980292 lon=-2.26504136905789 accu=5 aaccu=-1 speed=-1 head=-1 alt=0 type=current 2016-08-06 12:37:18:370 Test[3264:62403] LocationManager queue Location: id=0 time=140310177372752 lat=51.8726980292 lon=-2.26504136905789 accu=5 aaccu=-1 speed=-1 head=-1 alt=0 type=current But the co-ordinates displayed on the page never seem to refresh and update the true location.
Im probably missing the obvious, but can't see it, so any suggestions would be greatly appreciated.
0 comments:
Post a Comment