javascript - 当我更改页面时,地理位置给我一个错误
问题描述
我有一个使用 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();
}
解决方案
一件事是您在订阅时需要取消订阅。
这意味着您需要保留对订阅的类级别引用,以便稍后您可以将其删除。
对于您的代码,这看起来像:
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:
当您进行设置时,这将为您提供一些选项,以便页面取消订阅并且每次都订阅。我认为这会是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
}
推荐阅读
- r - R将连续变量转换为分类
- arduino - 连接 Arduino 传感器 MPU6050 和处理的问题
- javascript - Knex 如何构建一个数组 POSTGRES 查询
- shinyproxy - shinyproxy:如何绕过登录页面功能以避免登录两次?
- java - GridDB 的 set_auto_commit() 函数的使用
- r - 调整水平图例和绘图标题之间的距离 ggplotly
- robot - 获取传感器数据和电机控制值?
- python - 我的 else 语句有问题
- python - 如何在 Python 3.7 上安装 Python Catalyst,出现错误?
- c# - 如何为已翻译的 SQL 查询找到等效的 Linq 命令