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:
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:
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:
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:
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 {}
Top comments (0)