Einfacher Tageskilometerzähler mit der Geolocation API

Michael Mahemoff

Einführung

Mit der Geolocation API können Sie den Standort des Nutzers ermitteln und ihn bei seinen Bewegungen im Blick behalten – immer mit seiner Einwilligung. Diese Funktion kann als Teil von Nutzeranfragen verwendet werden, z.B. um jemanden zu einem Zielort zu leiten. Sie kann auch für das Geotagging von Inhalten verwendet werden, die von Nutzern erstellt wurden, z.B. um zu markieren, wo ein Foto aufgenommen wurde. Die API ist geräteunabhängig. Es spielt keine Rolle, wie der Browser den Standort ermittelt, solange Clients Standortdaten auf standardmäßige Weise anfordern und empfangen können. Der zugrunde liegende Mechanismus kann über GPS, WLAN oder einfach durch Aufforderung des Nutzers erfolgen, seinen Standort manuell einzugeben. Da jede dieser Suchanfragen einige Zeit in Anspruch nimmt, ist die API asynchron. Sie übergeben ihr eine Callback-Methode, wenn Sie einen Standort anfordern.

Im Beispiel ist dies ein Fahrtenzähler, der den Startpunkt anzeigt und die zurückgelegte Strecke seit dem Laden der Seite beibehält.

Schritt 1: Kompatibilität prüfen

Browser Support

• 5
• 12
• 3.5
• 5

Source

Sie können die Kompatibilität ganz einfach prüfen, indem Sie prüfen, ob das Geostandortobjekt vorhanden ist:

// check for Geolocation support
if (navigator.geolocation) {
  console.log('Geolocation is supported!');
}
else {
  console.log('Geolocation is not supported for this Browser/OS version yet.');
}

Schritt 2: HTML-Code für den Kilometerzähler deklarieren

In diesem Beispiel erstellen Sie einen Fahrtenzähler. Geben Sie dazu die folgende HTML-Datei an:

<div id="tripmeter">
<p>
Starting Location (lat, lon):<br/>
<span id="startLat">???</span>°, <span id="startLon">???</span>°
</p>
<p>
Current Location (lat, lon):<br/>
<span id="currentLat">???</span>°, <span id="currentLon">???</span>°
</p>
<p>
Distance from starting location:<br/>
<span id="distance">0</span> km
</p>
</div>

In den nächsten Schritten werden alle diese leeren Spans mithilfe der Geolocation API ausgefüllt.

Schritt 3: Aktuellen Standort des Nutzers ermitteln

getCurrentPosition() sendet asynchron Informationen zum aktuellen Standort des Nutzers. Rufen Sie ihn sofort nach dem Laden der Seite auf, damit die Startposition korrekt ausgefüllt und für später gespeichert wird:

window.onload = function() {
var startPos;
navigator.geolocation.getCurrentPosition(function(position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
});
};

Wenn zum ersten Mal eine Anwendung in dieser Domain Berechtigungen anfordert, prüft der Browser in der Regel, ob die Nutzereinwilligung vorliegt. Je nach Browser können auch Einstellungen vorhanden sein, mit denen Berechtigungsabfragen immer zugelassen oder abgelehnt werden. In diesem Fall wird der Bestätigungsvorgang übersprungen.

Nachdem Sie diesen Code ausgeführt haben, sollte die Startposition angezeigt werden. Je nach Standortgerät, das Ihr Browser verwendet, kann das Positionierungsobjekt tatsächlich viel mehr als nur Breiten- und Längengrad enthalten, z.B. eine Höhe oder eine Richtung. Sie können die Variable „position“ in der Konsole protokollieren, um weitere Informationen zu erhalten.

Schritt 4: Fehler verarbeiten

Leider sind nicht alle Standortabfragen erfolgreich. Möglicherweise konnte kein GPS gefunden werden oder der Nutzer hat die Standortsuche plötzlich deaktiviert. Ein zweites, optionales Argument für getCurrentPosition() wird bei einem Fehler aufgerufen, damit du den Nutzer im Rückruf benachrichtigen kannst:

window.onload = function() {
var startPos;
navigator.geolocation.getCurrentPosition(function(position) {
// same as above
}, function(error) {
alert('Error occurred. Error code: ' + error.code);
// error.code can be:
//   0: unknown error
//   1: permission denied
//   2: position unavailable (error response from locaton provider)
//   3: timed out
});
};

Schritt 5: Standort des Nutzers überwachen

Der vorherige Aufruf von getCurrentPosition() wurde nur einmal beim Laden der Seite ausgeführt. Verwenden Sie watchPosition(), um Änderungen zu verfolgen. Eine Callback-Funktion wird automatisch benachrichtigt, wenn sich der Nutzer bewegt:

navigator.geolocation.watchPosition(function(position) {
document.getElementById('currentLat').innerHTML = position.coords.latitude;
document.getElementById('currentLon').innerHTML = position.coords.longitude;
});

Schritt 6: Zurückgelegte Strecke anzeigen

Dieser Schritt hängt nicht direkt mit der Geolocation API zusammen, rundet die Demo aber ab und bietet ein Beispiel dafür, wie Sie Standortdaten verwenden können. Fügen Sie dem watchPosition()-Handler eine zusätzliche Zeile hinzu, um die zurückgelegte Strecke anzugeben:

navigator.geolocation.watchPosition(function(position) {
// same as above
document.getElementById('distance').innerHTML =
    calculateDistance(startPos.coords.latitude, startPos.coords.longitude,
                    position.coords.latitude, position.coords.longitude);
});

Die Funktion calculateDistance() führt einen geometrischen Algorithmus aus, um die Entfernung zwischen zwei Koordinaten zu bestimmen. Die JavaScript-Implementierung wurde aus einem Script von Moveable Type adaptiert, das unter einer Creative Commons-Lizenz zur Verfügung gestellt wird:

function calculateDistance(lat1, lon1, lat2, lon2) {
var R = 6371; // km
var dLat = (lat2 - lat1).toRad();
var dLon = (lon2 - lon1).toRad();
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
        Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
        Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
return d;
}
Number.prototype.toRad = function() {
return this * Math.PI / 180;
}