Ionic地理位置 _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.longitudeloading.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：现在, 你需要添加目标平台来部署应用程序。你可以使用手机来运行和测试该应用。为此, 你需要安装以下命令。