Ionic地理位置

如今, 位置在移动应用程序中起着至关重要的作用。地理位置插件可提供有关设备位置的信息, 例如纬度和经度。查找位置信息的一些常见来源是GPS（全球定位系统）和从网络信号（例如IP地址, Wi-Fi和蓝牙MAC地址, RFID和GSM / CDMA小区ID）推断出的位置。

最受欢迎的移动应用程序（如WhatsApp, Facebook和Instagram）使用地理位置来共享你的位置, 而不用说明方向。 Ola和Uber的应用程序提供基于地理位置的骑行服务。

地理位置插件基于W3C地理位置API规范, 该规范仅在不提供实现的设备上执行。在本教程中, 我们将逐步使用Geolocation插件来获取当前位置。

步骤1：创建一个新项目。你可以从此处了解如何在Ionic 4中创建项目。如果你已经有一个Ionic项目, 则可以跳过此步骤。

步骤2：接下来, 导航到项目并使用以下命令安装以下地理位置插件。

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

步骤3：将地理位置插件导入app.module.ts文件, 并将插件包括在提供程序中, 如下所示。这是必须执行的步骤。如果跳过此步骤, 则会发现错误, 例如没有提供地理位置的提供程序。你可以从以下代码片段中了解它。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { Geolocation } from '@ionic-native/geolocation/ngx';
import { WebView } from '@ionic-native/ionic-webview/ngx';

@NgModule({
  declarations: [AppComponent], entryComponents: [], imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule], providers: [
    StatusBar, SplashScreen, Geolocation, WebView, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ], bootstrap: [AppComponent]
})
export class AppModule {}

步骤4：打开home.page.ts文件并导入geolocation插件, 然后使用构造函数为geolocation类创建一个对象引用。现在, 创建一个函数以获取当前位置。以下代码段为你提供了详细说明。

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

@Component({
  selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], })
export class HomePage {
  lati: any = '';
  longi: any = '';
  constructor(private geolocation: Geolocation, public loadingController: LoadingController, public alertController: AlertController) {

  }
  async getCurrentLocation() {
    const loading = await this.loadingController.create({
      message: 'Please wait...', });
    await loading.present();

    this.geolocation.getCurrentPosition({maximumAge: 1000, timeout: 5000, enableHighAccuracy: true }).then((resp) => {
      // resp.coords.latitude
      // resp.coords.longitude
      loading.dismiss();
      this.lati = resp.coords.latitude;
      this.longi = resp.coords.longitude;
      }, er => {
        // alert("error getting location")
        loading.dismiss();
        this.showLoader('Can not retrieve Location');
      }).catch((error) => {
      // alert('Error getting location'+JSON.stringify(error));
      loading.dismiss();
      this.showLoader('Error getting location - ' + JSON.stringify(error));
      });
  }

 async showLoader(msg) {
    const alert = await this.alertController.create({
      message: msg, buttons: ['OK']
    });

    await alert.present();
  }
}

步骤5：创建函数后, 打开home.page.html文件。在此文件中, 你需要创建一个按钮并单击event以使用home.page.ts文件中定义的功能。

<ion-header>
  <ion-toolbar>
    <ion-title>Ionic Geolocation</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <ion-button (click)="getCurrentLocation()" expand="block">Get Location</ion-button>
  <ion-list>
    <ion-list-header>
      <ion-label>Location Information</ion-label>
    </ion-list-header>
    <ion-item>
      <ion-label>Latitue</ion-label>
      <ion-badge slot="end">{{lati}}</ion-badge>
    </ion-item>
    <ion-item>
      <ion-label>longitude</ion-label>
      <ion-badge slot="end">{{longi}}</ion-badge>
    </ion-item>
  </ion-list>
</ion-content>

步骤6：现在, 你需要添加目标平台来部署应用程序。你可以使用手机来运行和测试该应用。为此, 你需要安装以下命令。

$ ionic cordova platform add android
$ ionic cordova run android --aot

如果要在浏览器中测试你的应用程序, 请运行以下命令。

$ ionic serve

步骤7：执行应用程序时, 你将获得如下图所示的输出。

现在, 单击“获取位置”按钮, 你将以经度和纬度的形式获取设备的当前位置。它可以显示在下面的屏幕中。