ionic geolocation 插件錯誤：“No provider for Geolocation”

Question

我正在嘗試在我的 ionic2 hello world 項目中使用地理定位，並按照官方網站上的說明添加離子插件“Geolocation”。

我已經運行了這兩個命令：

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

這是我的 home.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!

起初我以為是因為我在瀏覽器中調試，但后來我的 Android 手機出現了同樣的錯誤。

那么“No provider for Geolocation”是什么意思，我應該如何在我的 ionic2 項目中使用地理定位？

非常感謝！

Answer 1

您需要將提供程序添加到NgModule，即提供程序下的module.ts，

providers: [
  Geolocation
]

Answer 2

您需要導入Geolocation類並將其添加到app.module.ts文件中的提供程序列表中

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

providers: [
     Geolocation
]

Answer 3

這對我有用，我把它導入到處都是但忘記將它添加到app.module.ts app.module.ts上的提供者

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

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

然后在頁面上我顯示lat和long在這種情況下作為測試家庭;

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 4

我有同樣的問題，我面對它，我的本機核心插件與我的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

Answer 5

對於Ionic 4，您可以添加到app.module.ts頂部：

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

在底部，在Providers數組的內部，添加Geolocation ：

providers: [
    Geolocation,
    ...
]

Answer 6

在2022 年，以下對我有用：

為了使地理定位工作，我必須進行以下更改：

離子集成禁用電容器

ionic cordova 插件添加 cordova-plugin-geolocation

npm 安裝@awesome-cordova-plugins/geolocation

npm 安裝@awesome-cordova-plugins/core

上述命令按照指定的順序執行的操作是禁用電容器集成，因為 cordova 插件不會與電容器版本一起安裝。 然后安裝地理定位插件並安裝核心，否則角度編譯器將拋出錯誤。

在app.module.ts中，添加以下內容：

import { Geolocation } from '@awesome-cordova-plugins/geolocation/ngx';

providers: [Geolocation],

以上配置完成后，在需要觸發地理定位的頁面中，可以添加如下代碼：

import { Component, OnInit } from '@angular/core';
import { Geolocation } from '@awesome-cordova-plugins/geolocation/ngx';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.page.html',
  styleUrls: ['./dashboard.page.scss'],
})
export class DashboardPage implements OnInit {

  latitude: any;
  longitude: any;

  constructor(private geolocation: Geolocation) { }

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

}

您現在可以像這樣在 HTML 頁面中顯示坐標：

{{latitude}} <---> {{longitude}}