Geolocation API von HTML5 – Einführung

Bei einem meiner Projekte wollte ich sehr gerne den Routenplaner von Google verwenden. Dies ist jedoch  nicht gerade elegant, da der Benutzer immer noch seinen Standort angeben muss. Ich selber besitze zwar keinen iPhone, würde mich aber über die folgende eine Funktion sehr freuen. Man geht auf die „Anfahrt“-Seite und erhält gleich die Route von meinem aktuellen Standort bis zum Ziel. Doch wie realisiert man solch eine Funktion? HTML5 und das Geolocation API machen es möglich.

Als aller erstes sollte geklärt werden wem diese Funktion was bringt, bzw. welche Browser diese Art der Ortung überhaupt ermöglichen. Wie man bereits oben entnehmen konnte, kann das iPhone das schon länger. Auch Firefox, ab Version 3.5, und Safari und Chrome, ab Version 5, und Opera ab der Verion10.6 unterstützen das Geolocation API von HTML5.

Doch woher weiß der Browser wo ich bin? Laut der Spezifikation sollen die Browser alle möglichen Quellen verwenden, um die Position so genau wie möglich zu bestimmen. Smartphones haben ein festverbautes GPS-Gerät, das wohl die präzisesten Daten liefert. Firefox und andere Browser können die Position zum Beispiel mit Hilfe des Betriebssystems herausfinden.

Nun kommen wir zu dem spannenden Teil. Wie bekommt man nun die Koordinaten? Das windows.navigator-Objekt wurde erweitert. Es steht nun auch das Objekt geolocation zur verfügung. Dieses Objekt kennt drei Methoden. Die für uns zurzeit relevanteste Methode ist getCurrentPosition, mit der der Standort ausgelesen wird. Diese Methode kann drei Parameter entgegennehmen. Der erste ist der Erfolgcallback, der zweite der Fehlercallback und mit dem dritten Parameter kann man ein Array mit Optionen übergeben. Als Optionen stehen dabei enableHighAccurace, timeout und maximumAge zur Verfügung.  enableHighAccurace wird mit einem booleschen Wert (true/false) befühlt und erzwingt eine möglichst exakte Positionierung ohne Rücksicht auf die Ortungsdauer. Mit timeout kann man die Ortungsdauer einschränken. Und maximumAge bestimmt wie lange die Position, in Sekunden, gecachet werden soll. Der Wert 0 besagt, dass bei jedem Anfordern der Position diese neu bestimmt wird.

Bauen wir uns also ein kleines Beispiel:

if (navigator.geolocation)
{
  var options = {
    enableHighAccuracy: true,
    timeout: 10000,
    maximumAge:0
  };
  navigator.geolocation.getCurrentPosition (successCallback, errorCallback, options);
}

Daraufhin sollte man sich schnell eine kleine Funktion für den Fehlerfall vorbereiten. Dafür definieren wir eine  errorCallback-Funktion mit dem Übergabeparameter error. Das error-Objekt beinhaltet einen Fehlercode. Der Wert 0 steht für einen Unbekannten Fehler, der Wert 1 zeigt an, dass der Benutzer die Ortung verweigert hat, beim Wert 2 ist die Position nicht verfügbar und der Wert 3 steht für den Timeout.

function errorCallback (error)
{
  switch (error.code)
  {
    case 0 : alert ('UNKNOWN_ERROR');
            break;
    case 1 : alert ('PERMISSION_DENIED');
            break;
    case 2 : alert ('POSITION_UNAVAILABLE');
            break;
    case 3 : alert ('TIMEOUT');
      break;
  }
}

Nun müssen wir nur noch die successCallback-Funktion schreiben. Die Funktion bekommt einen Übergabeparameter position. position ist ein Objekt, das drei weitere Objekte, und zwar timestamp, coords und address, beinhaltet. Für uns ist vor allem das Objekt coords interessant, denn dieses beinhaltet die Koordinaten. Läuft man das Objekt durch, so sieht man alle Eingenschaften des Objekts coords. coords.latitude mit der geografischen Breite, coords.longitude mit der geografischen Länge, coords.altitude mit der Höhe und einige mehr. Somit haben wir alles um eine Ortung durchführen zu können.

function successCallback (position)
{
  alert ('geografischen Breite: '+ coords.latitude +'; geografischen Länge: '+ coords.longitude +'; Höhe: '+ coords.altitude);
}

Jetzt müssen wir die Daten lediglich verarbeiten und ausgeben. Auch das address-Objekt beinhaltet sehr interessante Angeben, die wir jedoch nicht für die Routenberechnung brauchen. Das Objekt beinhaltet sämtliche Angaben zur Adresse: Land, Ländercode, Landkreis, Ort, Straße, Straßennummer und die PLZ. Wollen wir auch diese Informationen verwende, so müssen wir lediglich die  successCallback-Funktion anpassen:

function successCallback2 (position)
{
  alert ("geografischen Breite: "+ position.coords.latitude +";\n geografischen Länge: "+ position.coords.longitude +";\n Höhe: "+ position.coords.altitude);
 
  alert ("Land: "+ position.address.country +";\n Ländercode: "+ position.address.countryCode +";\n Landkreis: "+ position.address.county +";\n Stadt: "+ position.address.city +";\n Region: "+ position.address.region +";\n Straße: "+ position.address.street +";\n Straßennummer: "+ position.address.streetNumber +";\n PLZ: "+ position.address.postalCode);
}

Somit haben wir das Geolocation API von HTML5 auf die Schnelle kennengelernt. In weiteren Artikeln werde ich wohl das Zusammenspiel von dem API und den Google-Diensten, wie Google Maps, genauer erläutern. Bis dahin wünsche ich euch eine schöne und produktive Woche.

ALL-INKL.COM

3 Kommentars zu dem Artikel “Geolocation API von HTML5 – Einführung”

  1. Avatar von Kahmann
    Kahmann

    Hallo,
    danke für den tollen Beitrag. Die am Ende versprochene Fortsetzung zum Zusammenspiel mit Google Maps wird es aber leider nicht mehr geben? Ich versuche nämliche gerade mit sehr geringen programmierkenntnissen dies zu realisieren und scheitere nun leider daran, das ich nicht weiß, wie ich nachher die longitude und latitude werte abgreifen kann, um sie als koordinaten in meiner Google Map auf meiner Website zu benutzen.

    • Avatar von StarSt0rm
      StarSt0rm

      Hallo Kahmann,
      die „Fortsetzung“ wird schon folgen. Leider bin ich in Moment sehr im Stress und dadurch muss ich den Blog leider etwas vernachlässigen. Ich hoffe, dass es sich 2011 ändern wird.
      Wünsche dir einen guten Rutsch ins neue Jahr!
      Gruß Alex