Verwendung der Geolocation API in Ionic

 

Die Geolocation API in Ionic erlaubt dem Anwender den Zugriff auf die nativen GPS- und Ortungssensoren zur genauen Positionsbestimmung- und Verfolgung innerhalb einer Ionic Anwendung.

Was ist das Ionic?

Ionic ist ein Open-Source-Framework, welches es ermöglicht, mithilfe von Webtechnologien plattformunabhängige Apps und Web-Anwendungen zu entwickeln. So kann zum Beispiel mit nur einer Codebase gleichzeitig eine Android-App und eine iOS App entwickelt werden. Ionic kann sowohl mit Angular, React und Vue.js verwendet werden.

Verwendung der Geolocation API 

 

Installation

Zur verwendung der Geolocation API muss diese zuerst im Ionic Projekt installiert werden. Dies passiert über die folgenden Befehle:

```bash npm install @capacitor/geolocation npx cap sync ```

Berechtigungen

 

Nach der Installation muss sichergestellt werden, dass die zu erstellende App berechtigt ist, auf die nativen Sensoren zuzugreifen. Dafür müssen in den entsprechenden Manifestdateien die passenden Berechtigungen hinterlegt werden.

Für eine iOS App müssen in der `Info.plist` Beschreibungen für die Schlüssel
`NSLocationAlwaysUsageDescription (Privacy – Location Always Usage Description)` und
`NSLocationWhenInUseUsageDescription (Privacy – Location When In Use Usage Description)` hinterlegt werden.

Für eine Android App müssen die folgenden Berechtigungen in der `AndroidManifest.xml` hinterlegt werden:

„`xml

<uses-permission android:name=“android.permission.ACCESS_COARSE_LOCATION“ />

<uses-permission android:name=“android.permission.ACCESS_FINE_LOCATION“ />

<uses-feature android:name=“android.hardware.location.gps“ />

„`

Verwendung

Anschließend kann die Geolocation API im Code verwendet werden

Beispiel für das auslesen der aktuellen Position:

„`typescript

import { Geolocation } from ‚@capacitor/geolocation‘;

async function printCurrentPosition() {

    const coordinates = await Geolocation.getCurrentPosition();

   console.log(‚Current position:‘, coordinates);

}

„`

Tipps und Tricks

 

Genauigkeit der Position verbessern

Die Genauigkeit der Methode `getCurrentPosition` kann verbessert werden, indem das Flag `enableHighAccuracy` übergeben wird.

Beispiel:

„`typescript

import { Geolocation } from ‚@capacitor/geolocation‘; 

async function printCurrentPosition() {

    const coordinates = await Geolocation.getCurrentPosition({

        enableHighAccuracy: true

    }); 

    console.log(‚Current position:‘, coordinates);

}

„`