当我更改页面时，地理位置给我一个错误

Question

我有一个使用 Ionic 4 + Angular 8 的应用程序，我遇到了一个我不太了解的问题。

我的主页上有两个事件来获取我的位置，在我的 ngOnInit 上我有

  ngOnInit() {
    this.iniMap();
    setTimeout(() => {
      this.iniWatchingMap();
    }, 2000);
  }

我有两个函数，一个用于初始化地图，另一个用于在用户更改位置时启动订阅事件。

async iniMap() {
this.globalLoading = await this.loadingController.create({
  message: 'Carregando Localização',
});
this.globalLoading.present();
this.globalMap = tt.map({
  key: 'my-key',
  container: 'map',
  style: 'tomtom://vector/1/basic-main',
  center: [-53.2, -10.3333333],
  zoom: 16,
});
this.globalMap.addControl(new tt.FullscreenControl());
this.globalMap.addControl(new tt.NavigationControl());
this.globalMarker = new tt.Marker()
.setLngLat([-53.2, -10.3333333])
.addTo(this.globalMap);
this.globalMap.on('load', () => {
  this.renderer.removeClass(this.mapElement, 'hide-map');
  this.renderer.addClass(this.mapElement, 'visible');
  this.mapLoaded = true;
  this.globalLoading.dismiss();
});

}

另外一个是我的观看功能

watchPositionUser() {
    const watchOptions = {
      frequency : 3000,
      timeout : 10000,
      enableHighAccuracy: true // may cause errors if true
    };
    this.watchUser = this.geolocation.watchPosition(watchOptions);
    this.watchUser.subscribe((data: any) => {
      this.lat = data.coords.latitude;
      this.long = data.coords.longitude;
      // const points = [[-104.98485, 39.73845], [-118.24334, 34.05224], [-122.42017, 37.78008]];
      this.globalMap.jumpTo({center: [this.long, this.lat]});
      this.globalMarker
      .setLngLat([this.long, this.lat])
      .addTo(this.globalMap);
     }, error => {
      this.renderer.addClass(this.mapElement, 'hide-map');
      this.mapError = true;
      console.log('Error getting location', error);
      this.globalLoading.dismiss();
     });
  }

当我不更改我的页面时这工作正常，但是当我移动到另一个页面后返回此页面时，我收到此错误

获取位置时出错 PositionError {code: 3, message: "Timeout expired"}

我知道那是超时，但如果我不设置超时，他需要几个小时，我不知道为什么。

另一件事我的位置非常错误它在离子中是正常的吗？还是因为我在网络上测试是错误的，但如果我使用手机它会是正确的？

这是我换页时出现新错误的地方

ngOnDestroy() {
    this.watchUser.unsubscribe();
  }

Answer 1

有一件事是你需要unsubscribe when you subscribe。

这意味着您需要保留对订阅的类级别引用，以便以后可以将其删除。

对于您的代码，这看起来像：

import { OnDestroy } from "@angular/core";
import { ISubscription } from "rxjs/Subscription";

// class definition needs it like
export class EventListPage implements OnInit, OnDestroy {

// in the class
private watchSubscription: ISubscription;

iniWatchingMap() {

    // ... snip ...
    this.watchSubscription = watch.subscribe((data: any) => {
      // ... snip ...
     }, error => {
       console.log(error);
     });
  }

ngOnDestroy() {
  this.watchSubscription.unsubscribe();
}

您还需要研究 Ionic Page Lifecyle：

Ionic Page Life Cycle - Ionic Documentation

当您进行设置时，这将为您提供一些选项，以便页面取消订阅并且每次都订阅。我认为这将是ionViewWillEnter，但您需要自己做一些研究，看看在您的场景中什么是有效的。

我认为这应该足以让你取得进步。

更新

这是您尝试应用我的示例时出错的地方：

  // HERE
  private watchSubscription: any;
  // HERE

  watchPositionUser() {
    const watchOptions = {
      frequency : 3000,
      timeout : 10000,
      enableHighAccuracy: true // may cause errors if true
    };
    this.watchUser = this.geolocation.watchPosition(watchOptions);
    // HERE
    this.watchSubscription = this.watchUser.subscribe((data: any) => {
    // HERE
      this.lat = data.coords.latitude;
      this.long = data.coords.longitude;
      // const points = [[-104.98485, 39.73845], [-118.24334, 34.05224], [-122.42017, 37.78008]];
      this.globalMap.jumpTo({center: [this.long, this.lat]});
      this.globalMarker
      .setLngLat([this.long, this.lat])
      .addTo(this.globalMap);
     }, error => {
      this.renderer.addClass(this.mapElement, 'hide-map');
      this.mapError = true;
      console.log('Error getting location', error);
      this.globalLoading.dismiss();
     });
  }

  ngOnDestroy() {
    // HERE
    this.watchSubscription.unsubscribe();
    // HERE
  }