Blog der Heimetli Software AG

Geo-Position im Browser abfragen

Bis vor kurzem war es nur mit plattformspezifischen Apps möglich, die Position eines mobilen Gerätes auszulesen.

Heute reichen ein paar Zeilen JavaScript, um die Position im Browser auszulesen. Praktisch alle aktuellen Browser (sogar der IE) unterstützen jetzt die Geolocation-API.

Die Geolocation-API

Die API ist sehr übersichtlich, es gibt bloss drei Methoden am Geolocation-Objekt:

  • getCurrentPosition
  • watchPosition
  • clearWatch

Die ersten beiden Methoden brauchen zumindest eine Callback-Funktion die die Antwort auswertet. Es ist allerdings besser, auch einen zweiten Callback für die Fehlerbehandlung anzugeben, sonst tappt man im dunkeln, wenn ein Fehler auftritt.

Als weiteren Parameter kann ein Konfigurations-Objekt angegeben werden, das ein Timeout und die gewünschte Präzision definiert.

clearWatch bekommt einen longint als Argument. Dieser longint ist der Rückgabewert von watchPosition.

getCurrentPosition

Ruft so rasch als möglich den Callback mit der aktuellen Position auf. Um diese Vorgabe zu erfüllen, kann auf eine gespeicherte Position zurückgegriffen werden, die nicht unbedingt die exakte Position darstellt.

watchPosition

Gibt so rasch als möglich eine erste Schätzung der Position an, und liefert genauere Angaben nach wenn sie verfügbar werden.

Diese Methode aktiviert ein vorhandenes GPS und fragt periodisch nach einem Update der Position. Das braucht zusätzliche Energie, was bedeutet, dass der Akku schneller geleert wird. Sobald eine genügend genaue Position ausgelesen wurde, sollten mit clearWatch die Updates gestoppt werden.

JavaScript-Code für die Abfrage

Auch wenn eigentlich alle aktuellen Browser die API implementieren, ist es sinnvoll, vor dem Aufruf der Methoden eine Abfrage zu machen:

if( navigator.geolocation )
   // Der Browser kennt die Methoden für Geolocation

Die direkte Abfrage der Position ist sehr einfach:

navigator.geolocation.getCurrentPosition( showposition, showerror ) ;

showposition und showerror sind die Namen der Callback-Funktionen. showposition bekommt ein Objekt mit der aktuellen Position und kann die zum Beispiel in einer textarea anzeigen.

function showposition( position )
{
   var memo = document.getElementById( "memo" ) ;

   var text = "Latitude:  " + position.coords.latitude  + "\n" ;
   text    += "Longitude: " + position.coords.longitude + "\n" ;
   text    += "Altitude:  " + position.coords.altitude  + "\n" ;
   text    += "Accuracy:  " + position.coords.accuracy  + "\n" ;

   memo.innerHTML = text ;
}

Es ist übrigens ratsam, die Accuracy bei der Auswertung zu berücksichtigen. An meinem DSL-Anschluss gibt Chrome eine Position an die recht weit von hier ist. Der Accuracy-Wert von 95km lässt aber klar erkennen, dass diese Position sehr ungenau ist.

showerror wird aufgerufen wenn die Position nicht bestimmt werden kann. Bisher habe ich zwei verschiedene Fehler gesehen: "Permission denied" und "Position unavailable".

function showerror( error )
{
   var memo = document.getElementById( "memo" ) ;

   var text = "Error:   " ;

   if( error.code == error.PERMISSION_DENIED )
      text += "Permission denied" ;
   else if( error.code == error.POSITION_UNAVAILABLE )
      text += "Position unavailable" ;
   else if( error.code == error.TIMEOUT )
      text += "Timeout" ;

   text += "\nMessage: " + error.message + "\n" ;

   memo.innerHTML = text ;
}

"Permission denied" meldet zum Beispiel Chrome auf Android-Geräten wenn Google keine Erlaubis hat, die Position des Gerätes abzufragen.

Zur Sicherheit muss der User das Auslesen der Position explizit erlauben. Lehnt er das ab, bekommt man ebenfalls ein "Permission denied".

"Position unavailable" meldete ein Safari auf einem Mac.

Demo der Positionsabfrage




Position auf einer Karte darstellen

Beispielcode um die ausgelesene Position auf einer Karte anzuzeigen finden Sie unter Position auf Google Maps anzeigen.

Nicht abtippen

Denn hier gibt's geolocation.js zum Download.