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

Question

2021 年 3 月，我已经安装了 ionic 以及地理定位组件。

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

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

“坐标”这个词用红色下划线，如果我将鼠标指针放在它上面，它会告诉我以下图像：

enter image description here

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

Answer 1

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

/**
* 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，所以它不存在于 Observable。这是一个打字稿错误。

那么你有两个选择：

1. 将数据类型设为any，但不会检查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 而不是 地理位置。

Answer 2

我在 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”函数中是钢。我想这是因为在承诺的环境之外，值不会出现，因此我们必须从那里添加代码以在地图上显示它或/并调用将其保存在数据库中的服务，但所有这来自订阅者的环境。