Ein einfacher Kilometerzähler mit der Geolocation-API

Einführung

Mit der Geolocation-API können Sie herausfinden, wo sich der Benutzer befindet, und ihn überwachen, während er sich bewegt, immer mit Zustimmung des Benutzers. Diese Funktionalität kann als Teil von Benutzerabfragen verwendet werden, z. B. um jemanden zu einem Zielpunkt zu führen. Es kann auch zum "Geo-Taggen" von Inhalten verwendet werden, die der Benutzer erstellt hat, z. B. um zu markieren, wo ein Foto aufgenommen wurde. Die API ist geräteunabhängig. Es ist egal, 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 oder WLAN erfolgen oder einfach den Benutzer auffordern, seinen Standort manuell einzugeben. Da jede dieser Suchvorgänge einige Zeit in Anspruch nehmen wird, ist die API asynchron. Sie übergeben ihm eine Rückrufmethode, wenn Sie einen Standort anfordern.

Das Beispiel hier ist ein Kilometerzähler, der den ursprünglichen Standort anzeigt und die Entfernung anzeigt, die sie seit dem Laden der Seite zurückgelegt haben.

Schritt 1. Überprüfen Sie die Kompatibilität

Sie können die Kompatibilität einfach überprüfen, indem Sie prüfen, ob das Geolocation-Objekt vorhanden ist:

// auf Geolocation-Unterstützung prüfen
if(navigator.geolocation){ 
  console.log('Geolocation wird unterstützt!'); 
}else{ 
  console.log('Geolocation wird für diese Browser / OS-Version noch nichtunterstützt.'); 
}
    

Schritt 2. Deklarieren Sie den HTML-Code des Kilometerzählers

In diesem Beispiel erstellen Sie einen Kilometerzähler. Deklarieren Sie daher den folgenden HTML-Code:

  

    Starting Location (lat, lon):

    ???°, ???°
  
  

    Current Location (lat, lon):

    ???°, ???°
  
  

    Distance from starting location:

    0 km
  

In den nächsten Schritten wird die Geolocation-API verwendet, um alle diese leeren Bereiche zu füllen.

Schritt 3. Bestimmen Sie den aktuellen Standort des Benutzers

getCurrentPosition()meldet asynchron den aktuellen Standort des Benutzers. Rufen Sie es auf, sobald die Seite geladen ist, 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 dies das erste Mal ist, dass eine Anwendung in dieser Domain Berechtigungen angefordert hat, prüft der Browser normalerweise die Zustimmung des Benutzers. Abhängig vom Browser kann es auch Voreinstellungen geben, Berechtigungssuchen immer zuzulassen oder nicht zuzulassen. In diesem Fall wird der Bestätigungsprozess umgangen.

Nachdem Sie diesen Code ausgeführt haben, sollten Sie nun die Startposition sehen können. Abhängig von dem Ortungsgerät, das Ihr Browser verwendet, enthält das Positionsobjekt möglicherweise viel mehr als nur Breiten- und Längengrade, z. B. eine Höhe oder eine Richtung. Sie können weitere Informationen erhalten, indem Sie die Positionsvariable in der Konsole protokollieren.

Schritt 4. Behandeln Sie Fehler

Leider sind nicht alle Standortsuchen erfolgreich. Möglicherweise konnte ein GPS nicht gefunden werden oder der Benutzer hat die Standortsuche plötzlich deaktiviert. Im getCurrentPosition() Fehlerfall wird ein zweites optionales Argument aufgerufen, damit Sie den Benutzer innerhalb des Rückrufs 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. Überwachen Sie den Standort des Benutzers

Der vorherige Aufruf von getCurrentPosition()wurde beim Laden der Seite nur einmal ausgeführt. Verwenden Sie zum Verfolgen von Änderungen watchPosition(). Es benachrichtigt automatisch eine Rückruffunktion, wenn sich der Benutzer 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 steht nicht in direktem Zusammenhang mit der Geolocation-API, sondern rundet die Demo ab und bietet ein Beispiel für die Verwendung von Standortdaten.Fügen Sie dem watchPosition()Handler eine zusätzliche Zeile hinzu, um die zurückgelegte Strecke zu füllen:

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 calculateDistance()Funktion führt einen geometrischen Algorithmus aus, um den Abstand zwischen zwei Koordinaten zu bestimmen. Die Javascript-Implementierung basiert auf einem Skript, das von Moveable Type unter einer Creative Commons-Lizenz bereitgestellt 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;
}