Ionic 2 cordova-plugin-mauron85-background-geolocation 不更新 UI

Posted 2023-03-16

【中文标题】Ionic 2 cordova-plugin-mauron85-background-geolocation 不更新 UI

【英文标题】：Ionic 2 cordova-plugin-mauron85-background-geolocation Not Updating UI

【发布时间】：2016-12-12 18:09:24

【问题描述】：

我是 Ionic 和 Typescript 的新手，如果我对脸有这样的看法，我深表歉意！

我正在尝试使用 Ionic 2 构建一个简单的 ios 和 android 应用程序，该应用程序仅显示用户当前位置，并在他们移动时更新。

我面临的问题是，虽然我似乎通过 UI 获取坐标位置，但从未更新以显示更新的位置。

我使用 cordova-plugin-mauron85-background-geolocation 插件作为 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();

然后我将其注入到我的页面 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();
  

我的页面内容是：

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

当我为 iOS 编译我的应用程序并在 Xcode 中运行时，它看起来与我预期的一样，当我单击“开始跟踪”按钮时，我在 Xcode 控制台中看到表明位置被正确获取的条目，即

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

但页面上显示的坐标似乎永远不会刷新和更新真实位置。

我可能错过了明显的，但看不到它，所以任何建议将不胜感激。

【问题讨论】：

我也有同样的问题，作为作者，我可以在 Xcode 中查看控制台日志并以作者的身份获取位置，但从未触发成功回调。

您是否尝试在zone.run() 代码中使用console.log(this.latitude, this.longitude)？

@Akis 回调 this.locationUpdated 根本没有被触发。

我在 android 上也一样

【参考方案1】：

你现在可能已经解决了这个问题，但问题出在这行：

BackgroundGeolocation.configure(config)
 .then(this.locationUpdated) <-----
 .catch((error) => 
      console.log('BackgroundGeolocation error');
  );

所以你的回调会被触发，但它会丢失 this 的上下文。

您需要使用 .bind()

发送正确的上下文

BackgroundGeolocation.configure(config)
 .then(this.locationUpdated.bind(this)) <-----
 .catch((error) => 
      console.log('BackgroundGeolocation error');
  );