Einfacher Tageskilometerzähler mit der Geolocation API

Michael Mahemoff

Einleitung

Mit der Geolocation API kannst du herausfinden, wo sich der Nutzer befindet, und ihn, wenn er sich von einem anderen Ort bewegt, im Auge behalten – immer mit der Zustimmung des Nutzers. Diese Funktion kann im Rahmen von Nutzerabfragen verwendet werden, z.B. um jemanden zu einem Zielpunkt zu leiten. Es kann auch verwendet werden, um vom Nutzer erstellte Inhalte mit Geo-Tags zu versehen, z.B. um zu kennzeichnen, wo ein Foto aufgenommen wurde. Die API ist geräteunabhängig. Es spielt keine Rolle, wie der Browser den Standort bestimmt, solange Clients Standortdaten auf Standardmethode anfordern und empfangen können. Das kann über GPS, WLAN oder einfach die manuelle Eingabe seines Standorts erfolgen. Da jede dieser Suchvorgänge einige Zeit in Anspruch nehmen wird, ist die API asynchron. Sie übergeben eine Callback-Methode, wenn Sie einen Standort anfordern.

In diesem Beispiel sehen Sie einen Kilometerzähler, der die Ausgangsposition anzeigt und die seit dem Laden der Seite zurückgelegte Strecke anzeigt.

Schritt 1: Kompatibilität prüfen

Sie können ganz einfach die Kompatibilität prüfen, indem Sie das Vorhandensein des Geolocation-Objekts testen:

// 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 des Fahrtenzählers angeben

In diesem Beispiel geben Sie den folgenden HTML-Code an, da Sie einen Kilometerzähler erstellen:

<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 die leeren Spans über die Geolocation API ausgefüllt.

Schritt 3: Aktuellen Standort des Nutzers ermitteln

getCurrentPosition() meldet asynchron den aktuellen Standort des Nutzers. Rufen Sie es auf, sobald die Seite geladen ist, damit es die Ausgangsposition korrekt füllt und für später speichert:

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 eine Anwendung in dieser Domain zum ersten Mal Berechtigungen angefordert hat, prüft der Browser normalerweise die Nutzereinwilligung. Je nach Browser kann es auch sein, dass die Suche von Berechtigungen immer zugelassen oder nicht zugelassen wird. In diesem Fall wird der Bestätigungsprozess umgangen.

Nach der Ausführung dieses Codes sollten Sie die Startposition sehen können. Abhängig vom Standortgerät, das Ihr Browser verwendet, kann das Positionsobjekt viel mehr als nur Breiten- und Längengrad enthalten, z.B. eine Höhe oder eine Richtung. Sie können die Positionsvariablen in der Konsole protokollieren.

Schritt 4: Fehler beheben

Leider sind nicht alle Standortsuchen erfolgreich. Vielleicht konnte kein GPS-Standort gefunden werden oder der Nutzer hat plötzlich die Standortsuche deaktiviert. Im Falle eines Fehlers wird ein zweites, optionales Argument für getCurrentPosition() aufgerufen, damit Sie den Nutzer innerhalb des Callbacks benachrichtigen können:

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 beim Seitenaufbau nur einmal ausgeführt. Änderungen können mit watchPosition() erfasst werden. Sobald sich der Nutzer bewegt, wird automatisch eine Callback-Funktion aktiviert:

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 bezieht sich nicht direkt auf die Geolocation API, schließt die Demo aber ab und liefert ein Beispiel dafür, wie Sie Standortdaten verwenden können. Fügen Sie dem Handler watchPosition() eine zusätzliche Zeile hinzu, um die zurückgelegte Strecke zu erfassen:

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 basiert auf einem von „Moveable Type“ bereitgestellten Script unter einer Creative-Commons-Lizenz:

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;
}