为 Angular 编写 Geolocation API 作为 promise 或 observable

Question

I am using Angular 6 and need to get location data in a promise. The geolocation API has a callback for success and error navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

w3c Geolocation API

[NoInterfaceObject]
interface Geolocation {
  void getCurrentPosition(PositionCallback successCallback,
  optional PositionErrorCallback errorCallback,
  optional PositionOptions options);

  long watchPosition(PositionCallback successCallback,
  optional PositionErrorCallback errorCallback,
  optional PositionOptions options);

  void clearWatch(long watchId);
};

How would I write a promise or observable for Angular that utilized the success and error callbacks?

Answer 1

In Observable way,

getLocation(): Observable<any> {
 return new Observable(obs => {
  navigator.geolocation.getCurrentPosition(
    success => {
      obs.next(success);
      obs.complete();
    },
    error => {
      obs.error(error);
    }
  );
});
}

Answer 2

You can create an async typescript function to return a new promise

async getLocation() {
  return new Promise((resolve, reject) => {
    navigator.geolocation.getCurrentPosition(resolve, reject);
  });
}

const pos = this.getLocation();
pos.then(res => {
  console.log(res);
})
.catch(err => {
  console.log(err);
});

I don't know if there is a better way to do it, but this seems to work.

Answer 3

avoid using type "any"

 getLocation() {
    return new Observable<GeolocationCoordinates>((observer) => {
      window.navigator.geolocation.getCurrentPosition(
        (position) => {
          observer.next(position.coords);
          // observer.complete() marks the observable as done. It means we can no longer emit any more values out of this observable
          observer.complete();
        },
        // observer.error puts observable into an error state. It means we can no longer emit any more values out of this observable
        (err) => observer.error(err)
      );
    });
  }