离子地理定位插件错误：“没有地理定位提供者”

Question

我正在尝试在我的 ionic2 hello world 项目中使用地理定位，并按照official site 上的说明添加离子插件“地理定位”。

我已经运行了这两个命令：

$ ionic plugin add cordova-plugin-geolocation
$ npm install --save @ionic-native/geolocation

这是我的家.ts：

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

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  map:any=null;
  geoInfo:any={
      resp:'',
      data:''
  };

  constructor(
      public navCtrl: NavController,
      private geolocation: Geolocation
  ) {

  }

  test(){
      this.geolocation.getCurrentPosition().then((resp) => {
          this.geoInfo.resp=JSON.stringify(resp);
          // resp.coords.latitude
          // resp.coords.longitude
      }).catch((error) => {
          console.log('Error getting location', error);
          this.geoInfo.resp='Error getting location';
      });

      let watch = this.geolocation.watchPosition();
      watch.subscribe((data) => {
          this.geoInfo.data=JSON.stringify(data);
          // data can be a set of coordinates, or an error (if an error occurred).
          // data.coords.latitude
          // data.coords.longitude
      });

  }

}

但是，我的 chrome 控制台出现以下错误：

EXCEPTION: Error in ./TabsPage class TabsPage - inline template:0:0 caused by: No provider for Geolocation!
error_handler.js:56ORIGINAL EXCEPTION: No provider for Geolocation!

一开始我以为是在浏览器中调试，但后来我的安卓手机也出现了同样的错误。

那么“没有地理定位提供者”是什么意思，我应该如何在我的 ionic2 项目中使用地理定位？

非常感谢！

Answer 1

需要将provider添加到NgModule中，即providers下的module.ts，

providers: [
  Geolocation
]

Answer 2

您需要导入 Geolocation 类并将其添加到 app.module.ts 文件中的提供者列表中

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

providers: [
     Geolocation
]

Answer 3

对于 Ionic 4，您添加到 app.module.ts 顶部：

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

在底部，Providers 数组内部，添加 Geolocation：

providers: [
    Geolocation,
    ...
]

Answer 4

这对我有用，我将它导入到任何地方，但忘记将它添加到 app.module.ts 上的提供程序 app.module.ts

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

providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
AuthService,
EmailValidator,
DataService,
Geolocation
]

然后在页面上我显示了在这种情况下作为测试主页的纬度和经度；

import { Geolocation } from '@ionic-native/geolocation';
lat: number;
longt: number;

this.geolocation.getCurrentPosition().then((resp) => {
  this.lat = (resp.coords.latitude);
  this.longt =(resp.coords.longitude);
 }).catch((error) => {
   console.log('Error getting location', error);
 });

然后在 home.html {{lat}} {{longt}}

我知道这很简单，但我只是在将数据放入地图之前获取数据。

Answer 5

我遇到了同样的问题，我面临的问题是我的原生核心插件与我的 package.json 中的版本不同。

您可以在以下位置查看此解决方案和其他文章：

https://forum.ionicframework.com/t/cant-resolve-peer-dependencies-after-update/107224/2 https://blog.ionicframework.com/help-test-ionic-native-5/

https://ionicframework.com/docs/native