Ako v Ionic (ver.5) pridať funkciu zistenia vlastnej polohy (geolokácia)
Tags: ionic, cordova
Published: 2023-01-04 08:30:55

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
```
V pracovnom adresári tejto Ionic aplikácie je teraz potrebné spustiť príkaz:

```
ionic cordova platform add android
```
č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
```
ešte spustiť ďalší príkaz:

```
npm install --save @ionic-native/geolocation
```
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
```
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
```
a v prehliadači uvidíme:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g9t51mj60np2yvhj070e.PNG)
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 {}
```
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>
```
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);
    });
  }
}
```
Ak si zobrazím v prehliadači túto stránku:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iz3m09kzsndoqkzux6jq.PNG)
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/09helxfsi46x7u0my75k.PNG)


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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tgx0sbo66rek6l14z36b.PNG)
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 {}
```