DEV Community

Juraj Chovan
Juraj Chovan

Posted on • Edited on

Ako v Ionic (ver.5) pridať funkciu zistenia vlastnej polohy (geolokácia)

#ionic #cordova

V nasledujúcom je popísaný (asi najjednoduchší) spôsob, ako do Ionic (ver.5) aplikácie pridať geolokáciu (tj.zistenie vlastnej GPS polohy.
Buď už mám nejakú existujúcu Ionic aplikáciu, alebo si ju vytvorím, príkazom:

ionic start Test004 blank --type=angular
Enter fullscreen mode Exit fullscreen mode

V pracovnom adresári tejto Ionic aplikácie je teraz potrebné spustiť príkaz:

ionic cordova platform add android
Enter fullscreen mode Exit fullscreen mode

čo pridá (do našej aplikácie) možnosť využitia frameworku "cordova" (je to knižnica, ktorá sprístupňuje niektoré nízkoúrovňové operácie, napr.kameru, senzory lokácie, ... v mobilnom zariadení).
Týmto si pripravíme používanie "cordova" platformy a nasleduje inštalácia geolokačného pluginu, inŠtalujeme ho príkazom:

ionic cordova plugin add cordova-plugin-geolocation --save
Enter fullscreen mode Exit fullscreen mode

ešte spustiť ďalší príkaz:

npm install --save @ionic-native/geolocation
Enter fullscreen mode Exit fullscreen mode

resp.ak vypisuje nejaké chyby v závislostiach (zvyčajne na knižnici "rxjs", tak to spustiť opakovane s parametrom "--force":

npm install --save @ionic-native/geolocation --force
Enter fullscreen mode Exit fullscreen mode

Tým sme zinštalovali všetky potrebné doplňujúce knižnice.
Možno teraz spustiť samotnú Ionic aplikáciu, príkazom:

ionic serve
Enter fullscreen mode Exit fullscreen mode

a v prehliadači uvidíme:

Image description
A teraz nasleduje samotné kódovanie (nebude ho veľa). V tomto testovacom prípade si iba ukážeme ako na hlavnej stránke tejto Ionic aplikácie bude tlačítko, po ktorého stlačení sa vypíše v konzole informácia z geolokačného cordova plugin-u - aj s GPS súradnicami.
Do aplikačného súboru "app.module.ts" doplniť import triedy "Geolocation" z knižnice "@ionic-native/geolocation/ngx" a pridanie tejto triedy medzi "providers", tj.:

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

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

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

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    Geolocation,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
    ],
  bootstrap: [AppComponent],
})
export class AppModule {}
Enter fullscreen mode Exit fullscreen mode

A teraz v súboroch stránky "home" doplniť potrebné - najprv si upraviť v súbore layout-u stránky, tj.v "home.page.html" tlačítko s volaním funkcie:

...
<ion-content [fullscreen]="true">
  ...
  <div id="container">
    <ion-button expand="full" color="primary" shape="round" (click)="getLocation()">Refresh location info</ion-button>
  </div>
</ion-content>
Enter fullscreen mode Exit fullscreen mode

A v súbore logiky stránky, tj.v "home.page.ts" doplniť:

import { Component } from '@angular/core';

import { Geolocation ,GeolocationOptions ,Geoposition ,PositionError } from '@ionic-native/geolocation/ngx'; 

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  locationCordinates: any;

  constructor(
    private geolocation : Geolocation
  ) {  }
  // click na tlacitko [Refresh location info]:
  getLocation() {
    this.getLatLng();
  }
  // zisti GPS polohu:
  getLatLng() {
    // this.loadingLocation = true;
    this.geolocation.getCurrentPosition().then((resp) => {
      console.log(resp);
      this.locationCordinates = resp.coords;
      // this.loadingLocation = false;
    }).catch((error) => {
      // this.loadingLocation = false;
      console.log('Error getting location', error);
    });
  }
}
Enter fullscreen mode Exit fullscreen mode

Ak si zobrazím v prehliadači túto stránku:

Image description
a po kliknutí na tlačítko [Refresh location info] sa aktivuje cordova geolokačný plugin, cez ktorý sú načítané údaje, a tie sa objavia vo výpise v konzole:

Image description

Poznámka: V prípade reálnej Ionic aplikácie som použil rovnaký postup, ale (už) pri pokuse deklarovať v stránke, v konštruktore triedu "geolocation" mi vypisovalo chybu:

Image description
Riešením na tento problém je doplniť deklaráciu providera do súboru modulu stránky "home.module.ts":

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

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule,
  ],
  providers: [
    Geolocation,
  ],
  declarations: [HomePage]
})
export class HomePageModule {}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

rebuss profile image

Exploring GraphCodeBERT for Code Search: Insights and Limitations

Michał -

sreekeshiyer profile image

Setting up a Queue Ingestion system for S3 to Redshift Transfer

Sreekesh Iyer -

sumsuzzaman profile image

Amazon SageMaker AI: Redefining Machine Learning

Sumsuzzaman Chowdhury -

peboycodes profile image

Make Your Website Dark Mode Ready in 15 Minutes

Paul -