Geolocation-API richtig einsetzen
Von den vielen schönen neuen APIs wird die Geolocation-API mit am besten unterstützt. Hierüber ermitteln Sie die Position des Benutzers, was viele interessante Anwendungen ermöglicht, gerade für mobile Websites.
In der Geolocation-API ist definiert, wie man mit Javascript auf Positionsangaben zugreifen kann. Sache der Browser wiederum ist es, diese zu ermitteln. Es ist nicht Teil der Spezifikation, wie die Browser das im Einzelnen anstellen, also auf welche der unterschiedlichen Lokalisierungsdatenbanken si...
In der Geolocation-API ist definiert, wie man mit Javascript auf Positionsangaben zugreifen kann. Sache der Browser wiederum ist es, diese zu ermitteln. Es ist nicht Teil der Spezifikation, wie die Browser das im Einzelnen anstellen, also auf welche der unterschiedlichen Lokalisierungsdatenbanken sie zugreifen - Firefox beispielsweise auf Google Location Services, Opera und Safari auf Skyhook Wireless, und so weiter.
Ortungsangaben sind an sich höchst sensible Daten. Stellen Sie sich nur einmal vor, was jemand alles über Sie erfährt, wenn er ein paar Wochen lang ausliest, wo Sie sich gerade aufhalten: Danach weiß er, wo Sie arbeiten, in welche Schule Ihre Kinder gehen, ob Sie im Bioladen oder beim Discounter einkaufen, welches Ihre Lieblingsfilme sind, eventuell auch welcher Religion Sie angehören und, und, und.Deshalb kann eine Website nicht einfach so auf diese Daten zugreifen, sondern nur, wenn der Benutzer explizit die Erlaubnis dazu erteilt. Wenn Sie eine Site besuchen, die Ihre Position auszulesen versucht, erscheint daher im Browser ein kleines Fenster mit einer Frage. Dann können Sie dem Versuch, Ihre Position zu ermitteln, zustimmen oder nicht.Bei der Ermittlung der Position werden verschiedene Kriterien herangezogen:
- IP-Adresse (ziemlich ungenau)
- WLAN-Netzwerkknoten (ziemlich genau - Google hat beispielsweise gleichzeitig mit dem Abfotografieren von Städten für Google Street Maps die Position von WLAN-Stationen gescannt und gespeichert)
- Handy-Netzwerkzelle
- GPS
Unterstützung prüfen
Relativ häufig werden von neuen APIs die Objekte als Unterobjekte von navigator implementiert, um sicherzustellen, dass es keine Kollisionen mit selbst erzeugten Objekten gibt - die Geolocation-API benutzt das Unterobjekt geolocation. Deswegen können Sie auf dieses Objekt hin testen, um festzustellen, ob die API im aktuellen Browser unterstützt wird.
if (navigator.geolocation) {}Statt die Überprüfung selbst durchzuführen, können Sie natürlich auch Modernizr nutzen:
if (Modernizr.geolocation) {
// wenn Geolocation unterstuetzt
}
else {
// Geolocation nicht unterstuetzt
}
Das Grundprinzip
Wenn die Geolocation-API unterstützt wird, stellt der Browser das Objekt navigator.geolocation mit verschiedenen Methoden zur Verfügung:
- getCurrentPosition() ermöglicht es, die aktuelle Position auszulesen. Das ist sicher die wichtigste Methode, die wir gleich am praktischen Beispiel betrachten werden.
- watchPosition() liest die aktuelle Position mehrmals aus, ist also nützlich, um eine Bewegung festzustellen.
- clearWatch() beendet die Beobachtung der aktuellen Position, die mit watchPosition() ausgelöst worden ist.
navigator.geolocation.
getCurrentPosition(positionermitteln, fehlerzeigen, optionen);getCurrentPosition erwartet also drei Parameter, von denen nur der erste obligatorisch ist:
- Als ersten Parameter eine Callbackfunktion, die aufgerufen wird, wenn die Positionsermittlung erfolgreich ist.
- Der zweite Parameter ist ebenfalls eine Callbackfunktion, die aufgerufen wird, wenn es einen Fehler gegeben hat.
- Als dritten Parameter können Sie ein Array mit Optionen übergeben.
- latitude: Breitengrad
- longitude: Längengrad
- altitude: Höhe
- accuracy: Exaktheit
- heading: Richtung
- speed: Geschwindigkeit
- altitudeAccuracy: Exaktheit der Höhenangabe
navigator.geolocation.
getCurrentPosition(
function (position) {
var ausgabe = "Breitengrad " +
position.coords.latitude + "\n"
+ "Laengengrad " + position.coords.
longitude + "\n" + "Hoehe " + position.coords.altitude + "\n"
+ "Exaktheit " + position.coords.
accuracy + "\n"
+ "Exaktheit Hoehe " + position.
coords.altitudeAccuracy + "\n"
+ "Richtung " + position.coords.
heading + "\n" + "Geschwindigkeit "
+ position.coords.speed + "\n"
+ "Zeitstempel " + position.
timestamp;
alert(ausgabe);
});Das Abfragen der Position erfolgt asynchron und es kann auch etwas dauern, bis das Ergebnis da ist.
Im Falle eines Fehlers
Das waren die Informationen, die Sie auslesen können, wenn die Bestimmung der Position erfolgreich war. Werfen wir jetzt einen Blick auf die Callbackfunktion, die im Fehlerfall aufgerufen wird. Das hier übergebene Objekt liefert beispielsweise einen der folgenden Fehlercodes:
- UNKNOWN_ERROR (0): unbekannter Fehler
- PERMISSION_DENIED (1): Erlaubnis nicht erteilt.
- POSITION_UNAVAILABLE (2): Position des Gerätes konnte nicht herausgefunden werden.
- TIMEOUT (3): Die Zeit ist abgelaufen. Dieser Fehler kann auftreten, wenn Sie bei den zusätzlichen Optionen eine Obergrenze angegeben haben.
Die Optionen
Als dritter Parameter von getCurrentPosition() kann ein Javascript-Objekt mit folgenden Optionen übergeben werden:
- enableHighAccuracy: Dahinter geben Sie true an, wenn Sie die Position mit größtmöglicher Exaktheit ermitteln wollen.
- maximumAge bestimmt das maximale Cache-Alter in Millisekunden; das kann sinnvoll sein, wenn das Gerät die Position im Cache speichert, um beispielsweise den Akku zu schonen.
- timeout ist die maximale Zeitdauer, in der versucht werden soll, die Position zu ermitteln.
function fehleranzeigen (fehler) {
var meldung = "";
switch(fehler.code) {
case fehler.PERMISSION_DENIED:
meldung = "Erlaubnis nicht erteilt";
break;
case fehler.POSITION_UNAVAILABLE:
meldung = "Position konnte nicht
ermittelt werden";
break;
case fehler.TIMEOUT:
meldung = "Position konnte nicht
in der vorgegebenen Zeit ermittelt werden";
break;
case fehler.UNKNOWN_ERROR:
meldung = "Ein unbekannter Fehler ist
aufgetreten";
break;
} /* Ende switch */
alert(meldung);
} /* Ende fehleranzeigen */Beachten Sie aber, dass es beispielsweise im Firefox oft schwierig ist, diese Fehler wirklich auszulösen. Gibt man etwa bei dem erscheinenden Dialog auf Nachfrage an, dass man diese Daten "Jetzt nicht" bereitstellen will, läuft die Fehlerroutine nicht an.
Fallbacklösungen
Die Browserunterstützung für Geolocation ist ordentlich: Alle modernen Browser können es, der Internet Explorer ab Version 9. Im Opera Mini funktioniert es allerdings nicht, was daran liegt, dass dort die Websites über einen zwischengeschalteten Proxyserver ausgeliefert werden, der für die eigentliche Darstellung sorgt.In älteren mobilen Geräten wird teilweise eine andere Variante von Geolocation, also nicht die W3C-Version, unterstützt. Das betrifft ältere Android-Browser oder Blackberry OS 5. Glücklicherweise gibt es ein Skript, das sich um die verschiedenen benötigten Implementierungen kümmert und diese unter einer einheitlichen Oberfläche verbirgt, nämlich geo-location-Javascript.Um es zu nutzen, müssen Sie es zuerst einbinden:
<script src="js/geo.js"></script>Dann müssen Sie die Überprüfung anpassen, mit der geschaut wird, ob die Geolocation-API unterstützt wird:
if(geo_position_js.init()){
geo_position_js.getCurrentPosition
(success_callback, error_callback);
}
else{
alert("keine Geolocation-
Unterstuetzung");
}Danach können Sie wie gewohnt die beiden Callbackfunktionen - success_callback() und error_callback() - definieren.
jQuery Mobile
Sehen wir uns als praktisches Beispiel an, wie man in jQuery Mobile eine Google-Maps-Karte anzeigen kann, bei der die aktuelle Position des Nutzers über die Geolocation-API ausgelesen wird.Die HTML-Grundstruktur zeigt eine einfache jQuery-Mobile-Seite. Zu Beginn müssen die für jQuery Mobile benötigten drei Dateien - zwei Javascript-Dateien sowie ein Stylesheet - eingebunden werden. Außerdem gibt es einen Verweis auf die Google-Maps-API und auf eine eigene Javascript-Datei, die dann den Code für das Beispiel enthält.
<link rel="stylesheet" href="https://
code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /><style>
#kartenseite, #karte { width: 100%;
height: 100%; padding: 0; }</style><script src="https://code.jquery.com/
jquery-1.7.1.min.js"></script><script src="https://code.jquery.com/
mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script><script src="https://maps.google.com/
maps/api/js?sensor=false"></script><script src="maps.js"></script>Zusätzlich wurden per CSS sowohl die gesamte Seite als auch das Element, das die Karte aufnehmen soll, auf 100 Prozent gesetzt. Dann folgt die in jQuery Mobile übliche Seitenstruktur mit div-Elementen, denen vorgegebene data-role-Werte zugewiesen werden. Das Dokument besteht aus einem umfassenden Element, einem Kopf- und einem Inhaltsbereich.
<div data-role="page" id=
"kartenseite"><div data-role="header"><a href="#" data-icon="home" data-
iconpos="notext" data-direction="reverse"></a><h1>Positionsbestimmung</h1></div><div data-role="content" id="karte"><!-- Hier kommt die Karte. --></div></div>Jetzt zum entscheidenden Javascript-Part, der für die Darstellung der Karte zuständig ist. Dieser steht in einer externen Datei mit Namen maps.js.Die Funktion wird bei pageinit aufgerufen - eine Besonderheit von jQuery Mobile, dass Sie hier nicht das sonst in jQuery üblichere $(function(){}); nehmen dürfen.
$( "#kartenseite" ).live( "pageinit",
function() {Falls die Geolocation-API nicht unterstützt wird, nehmen wir Standardbreiten- und -längenangaben, die Sie natürlich an Ihre Bedürfnisse anpassen müssen.
var standard= new google.maps.LatLng
(48.0983425, 11.3267434);Jetzt kommt die Überprüfung, ob die Geolocation API unterstützt wird.
if ( navigator.geolocation ) {Wenn ja, werden die Funktionen erfolg und fehler definiert. Diese rufen beide die Funktion kartezeichnen() auf, die noch definiert werden muss. Im Fehlerfall werden die Standardkoordinaten genommen, ansonsten die über die Geolocation-API ermittelten.
function erfolg(pos) {
kartezeichnen(new google.maps.LatLng
(pos.coords.latitude, pos.coords.longitude));
}
function fehler(error) {
kartezeichnen(standard);
}Schließlich kommt getCurrentPosition() zum Einsatz, wobei wir neben den beiden Callbackfunktionen erfolg und fehler Optionen angeben. Durch die Optionen legen wir fest, dass die Daten nicht älter als fünf Sekunden sein sollen, wir wünschen die höchstmögliche Genauigkeit und für den gesamten Vorgang geben wir eine Maximaldauer von neun Sekunden vor.
navigator.geolocation.
getCurrentPosition(erfolg, fehler, {maximumAge: 500000, enableHighAccuracy:true, timeout: 9000});
}Sofern die Geolocation-API nicht unterstützt wird, wird der else-Zweig ausgeführt und die Funktion kartezeichnen() mit den vorher definierten Standardkoordinaten ausgeführt.
else {
kartezeichnen(standard);
}Jetzt fehlt noch die Funktion kartezeichnen().
function kartezeichnen(breitelaenge)
{Zuerst bestimmen wir, wie die Karte aussehen soll, daneben ihren Zoomfaktor und ihren Typ.
var optionen = {
zoom: 11,
center: breitelaenge,
mapTypeId: google.maps.MapTypeId.
ROADMAP
};Dann erstellen wir ein neues google.maps.Map-Objekt und bestimmen das vorher mit einer id="karte" versehene Objekt als Container.
var map = new google.maps.Map
(document.getElementById("karte"), optionen);Außerdem zeichnen wir für die ermittelte Position noch Marker auf die Karte.
var marker = new google.maps.Marker({
position: breitelaenge,
map: map
});
} /* Ende kartezeichnen() */
}); /* Ende pageinit() */Auf diese Art lässt sich jQuery Mobile mit der Geolocation-API und Google Maps kombinieren. Wer noch komfortabler auch fortgeschrittene Kombinationen einsetzen möchte, kann hierfür auch ein nützliches Plug-in namens jquery-ui-map verwenden.Die Geolocation-API ist sicher zu Recht eine der am häufigsten genutzten APIs und besonders, aber nicht nur, für mobile Anwendungen interessant. Man darf jedoch nie vergessen, dass es auch bei guter Unterstützung immer passieren kann, dass der Nutzer einem nicht die Erlaubnis zum Auslesen der Daten erteilt. Daher ist es hier wichtig, sinnvolle Fallbacklösungen bereitzustellen.
Erlaubniseinstellungen in den Browsern
Für Tests ist es wichtig zu wissen, wie Sie die in diesem Fenster gegebene Erlaubnis widerrufen beziehungsweise im Nachhinein die Erlaubnis erteilen können.Diese Optionen finden Sie immer irgendwo in den Einstellungen des Browsers versteckt:Firefox: Hier geben Sie bei einzelnen Seiten die Berechtigungen und können sie auch für einzelne Seiten widerrufen. Der entsprechende Punkt befindet sich unter Extras/Seiteninformationen/Berechtigungen. Dort können Sie festlegen, dass immer nachgefragt werden soll, oder auch eine prinzipielle Berechtigung widerrufen.Google Chrome: Im Werkzeugmenü wählen Sie Einstellungen und klicken dann auf Erweiterte Einstellungen anzeigen. Bei Datenschutz wählen Sie Inhaltseinstellungen. Hier können Sie über Standort die prinzipiellen Regeln festlegen und bisher erteilte Erlaubnisse widerrufen.Im IE 9 rufen Sie unter Extras die Internetoptionen auf. Die entsprechende Option finden Sie hier unter Ort bei Datenschutz.Im Android-internen Browser gibt es entsprechende Optionen unter Einstellungen/Standortzugriff aktivieren beziehungsweise Standortzugriff löschen.Im iPhone finden Sie die entsprechende Einstellung unter Einstellungen/Allgemein/Zurücksetzen. Tippen Sie hier auf Ortungswarnungen zurücksetzen.Opera Mobile: Im Opera-Menü finden Sie den Punkt unter Einstellungen/Privatsphäre/Bekanntgegebene Ortungseinstellungen löschen.
