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

Question

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

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

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

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

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

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

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

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

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
  }