ionic-framework - 如何在 Ionic 3 中使用 GeoLocation 插件？

Question

我在让 GeoLocation 在 Ionic 3 中工作时遇到困难。我已经看了几个教程，都遇到了同样的问题。这是我的设置。

PS C:\> ionic info

cli packages: (C:\Users\myID\AppData\Roaming\npm\node_modules)

    @ionic/cli-utils  : 1.9.2
    ionic (Ionic CLI) : 3.9.2

global packages:

    Cordova CLI : 8.1.2 (cordova-lib@8.1.1)

local packages:

    @ionic/app-scripts : 3.1.0
    Cordova Platforms  : none
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.1.1
    Node              : v8.10.0
    npm               : 5.6.0
    OS                : Windows 10

PS C:\>
PS C:\>
PS C:\>
PS C:\> ionic cordova plugin list
> cordova plugin ls
v Running command - done!
cordova-plugin-geolocation 4.0.1 "Geolocation"
PS C:\>
PS C:\>
PS C:\>

在设置 hello-world/空白地理位置应用程序时，我收到错误引用地理定位插件。

// app.module.ts
import { Geolocation } from '@ionic-native/geolocation';
// ...
providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    Geolocation  // <-- Errors here
  ]

我可以通过添加 ngx 后缀来解决这个错误:

// app.module.ts
import { Geolocation } from '@ionic-native/geolocation/ngx';
// ...
providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    Geolocation  // OK now
  ]

但是，当我真正去使用它的时候:

//home.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation/ngx';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {

  lat: any;
  lng: any;

  constructor(public navCtrl: NavController,
    public geo: Geolocation) {
  }

  ionViewDidLoad() {
    this.geo.getCurrentPosition().then(pos => {
      this.lat = pos.coords.latitude;
      this.lng = pos.coords.longitude;
    }).catch(err => console.log(err));
  }

}

我开始收到这个错误:

TypeError: Object(...) is not a function at Geolocation.getCurrentPosition

注释掉对 getCurrentPosition 的调用会使错误消失。

我错过了什么？我的插件版本有误吗？有没有办法想知道哪个适用于最新版本的 Ionic 3？

Answer 1

您是否安装了 Geolocation 插件 v3？如你所见here ，命令是:

$ ionic cordova plugin add cordova-plugin-geolocation --variable GEOLOCATION_USAGE_DESCRIPTION="To locate you"
$ npm install --save @ionic-native/geolocation@4

安装后，您必须将插件导入到 app.module 以及您的 home.ts

import { Geolocation } from '@ionic-native/geolocation';

使用插件的代码是正确的，所以你不需要改变它。

this.geo.getCurrentPosition().then(pos => {
   this.lat = pos.coords.latitude;
   this.lng = pos.coords.longitude;
}).catch(err => console.log(err));