ionic 地理定位 - 芒果文档

📌 相关文章

📜 ionic 地理定位

📅 最后修改于: 2021-01-03 05:05:56 🧑 作者: Mango

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文件中定义的函数。


  
    Ionic Geolocation
  



  Get Location
  
    
      Location Information
    
    
      Latitue
      {{lati}}
    
    
      longitude
      {{longi}}

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

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

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

$ ionic serve

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