离子角 Lectura continuada de la geolocalizacion con la función "watchPosition" y en el data que me devuelve noexiste la propiedad coords,

编程问答 2022-05-18

问题描述

2021 年 3 月，我安装了 ionic 和 geolocation 组件。

这是“home.page.ts”中的代码：

async getMyLocation1() {
  let watch = await this.geolocation.watchPosition();
  watch.subscribe((data) => {      
    console.log(data.coords.latitude);  
  });
}

“coords”这个词用红色突出显示，如果我将鼠标指针放在它上面，它会告诉我下图：

enter image description here

getCurrentPosition() 函数确实毫无问题地将它返回给我，但 watchPosition() 没有实现任何目标。不知道是我用错了还是怎么的。有人可以帮我吗？

解决方法

阅读图书馆文档我可以读到：

/**
* Watch the current device's position.  Clear the watch by unsubscribing from
* Observable changes.
*
* ...
*
* @param {GeolocationOptions} options  The [geolocation options](https://developer.mozilla.org/en-US/docs/Web/API/PositionOptions).
* @returns {Observable<Geoposition | PositionError>} Returns an Observable that notifies with the [position](https://developer.mozilla.org/en-US/docs/Web/API/Position) of the device,or errors.
*/
watchPosition(options?: GeolocationOptions): Observable<Geoposition | PositionError>;

如您所见，该方法返回一个 Observable。所以，您得到的错误是因为 Geoposition.coords.latitude 属性存在于 Geoposition 界面中，但它不存在于 PositionError strong>，所以它不存在于 Observable。这是打字稿错误。

那么你有两个选择：

  1. 将数据类型设为任意，但不会检查PositionError：
async getMyLocation1() {
    let watch = await this.geolocation.watchPosition();
    watch.subscribe((data:any) => {      
        console.log(data.coords.latitude);
    });
}
  1. 更改代码以验证数据是否完成了地理定位界面（此界面检查的灵感来自this）：
async getMyLocation1() {
    let watch = await this.geolocation.watchPosition();
    watch.subscribe((data:any) => {
        if (this.isGeoposition(data)) {
            console.log(data.coords.latitude);  
        } else {
            console.log('Error getting location');
        }
    });
}

isGeoposition(data: any): data is Geoposition {
    return (data.coords !== undefined && data.timestamp !== undefined);
}

顺便说一下，如果您想知道 watchPosition 方法什么时候会返回 PositionError，一个例子是当浏览器询问您的位置，而您拒绝许可时，它会生成一个 >PositionError 而不是 Geoposition。

,

我在 home.pge.ts 中的代码如下：

import { Component,OnInit } from '@angular/core';
import { Geolocation,Geoposition } from '@ionic-native/geolocation/ngx';

declare var google;

@Component({
  selector: 'app-home',templateUrl: 'home.page.html',styleUrls: ['home.page.scss'],})
export class HomePage {

  public datGPS = {
    lat: 0,lng: 0,};
  
  constructor(private geolocation: Geolocation){
   
  }


  ngOnInit() {          
    this.loadMap(); 
  }


  async loadMap() {      
    this.getMyLocation();
    console.log("LoadMap: " + this.datGPS.lat);
    console.log("LoadMap: " + this.datGPS.lng);    
  }

  async getMyLocation() {        
    let watch = await this.geolocation.watchPosition();
    watch.subscribe((data:any) => {
        if (this.isGeoposition(data)) {            
            this.datGPS.lat = data.coords.latitude;
            this.datGPS.lng = data.coords.longitude           
            console.log("getMyLocation: " + this.datGPS.lat);
            console.log("getMyLocation: " + this.datGPS.lng);
        } else {
            console.log('Error getting location');
        }
    });
  }

  isGeoposition(data: any): data is Geoposition {
      return (data.coords !== undefined && data.timestamp !== undefined);
  }
}

当我执行它时，“getMyLocation”中承诺内的“console.log”具有价值，例如“this.datGPS.lat”，如果它具有价值，但我在外面的价值在“loadMap”函数中是钢。我想这是因为在承诺的环境之外，值不会出现，因此从那里我们将不得不添加代码以将其显示在地图上或/并调用将其保存在数据库中的服务，但所有这来自订阅者的环境。

angularangularionic-frameworkionic2ionic3ionic3ionic4