JavaScript/Geolocation

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit der Geolocation API können sie den Standort des Clienten ermitteln. Dies ist besonders interessant, um Benutzern maßgeschneiderte Antworten auf Suchanfragen, zielgerichtete Werbung und regionale Informationen zukommen zu lassen.[1] Neben den Daten zum Standort können die Genauigkeit der Koordinaten, Geschwindigkeit und Richtung der Bewegungen aufgezeichnet werden.

  • HTML5
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

Details: caniuse.com

Inhaltsverzeichnis

[Bearbeiten] Grundlagen

[Bearbeiten] Techniken

Bestimmt werden kann der Standort in verschiedenen Schritten mit aufsteigender Genauigkeit.

  1. IP-Adresse: Hierbei werden die Daten des Vermittlungsknoten des Providers verwendet. Da es so nur es zu einer Genauigkeit von ca. 25km bis zum Teil über 100km kommt, verknüpfen Geotargeting-Dienste nun eine Vielzahl von Daten, um den Standort näher bestimmen zu können.[2]
  2. WLAN-Netzwerke: Google hat im Rahmen von Google-StreetView zumindest in Ballungsgebieten auch alle WLAN-Netze erfasst. Durch eine Auswertung der Signalstärken Ihres WLANs im Vergleich mit benachbarten Netzen, die Ihre Signale auch noch empfangen, werden so Genauigkeiten bis 10m erreicht.[3]
  3. Funk-Signale: Durch die Trilateration zwischen den einzelnen Mobilfunk-Sendern und ihrer Signalstärken kann die Genauigkeit weiter verbessert (20-100m) werden.[4]
  4. GPS: Bei Mobiltelefonen mit GPS können Sie mittels enableHighAccuracy Genauigkeiten von 5-20m erreichen. Dies hat aber einen höheren Akkuverbrauch zur Folge.


[Bearbeiten] Datenschutz

Da die Preisgabe des Standorts einen starken Eingriff in die Privatsphäre bedeutet, sind schon in der Spezifikation strenge Sicherheitsbestimmungen vorgesehen. So erfordert jede Standortabfrage das Einverständnis des Nutzers, die aber immer bereits vom Browser übernommen wird.[5]

Screenshot

[Bearbeiten] Anwendung

[Bearbeiten] Verfügbarkeit der Geolocation prüfen

Beispiel: Verfügbarkeit prüfen
if (navigator.geolocation) { 
     /* code */ 
}


[Bearbeiten] Abfragen der Position

Mit der Geolocation.getCurrentPosition()-Methode können Sie den aktuellen Standort abfragen.

Sie hat folgende Eigenschaften:

  • coords.latitude: Breitenangabe als Dezimalzahl
  • coords.longitude: Längenangabe als Dezimalzahl
  • coords.accuracy: Genauigkeit der Koordinaten (in Meter)
  • coords.altitude: Höhenangabe (über dem Meeresspiegel)
  • coords.altitudeAccuracy: Genauigkeit der Höhenangabe
  • coords.heading: Richtung
  • coords.speed: Geschwindigkeit (in m/s)
  • timestamp: Zeit der Positionsangabe
Beispiel: Standortabfrage ansehen …
  var button =document.getElementById('los'); 
  button.addEventListener ('click', ermittlePosition);
  var ausgabe = document.getElementById('ausgabe');
 
function ermittlePosition() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(zeigePosition);
    } else { 
        ausgabe.innerHTML = 'Ihr Browser unterstützt keine Geolocation.';
    }
}
 
function zeigePosition(position) {
    ausgabe.innerHTML = "Ihre Koordinaten sind:<br> Breite: " + position.coords.latitude + 
    "<br>Länge: " + position.coords.longitude;	
}
Durch einen Klick auf den Button wird die Funktion ermittlePosition() aufgerufen. Sie überprüft, ob Geolocation verfügbar ist und ruft dann mit der Geolocation.getCurrentPosition()-Methode die Breiten- und Längenangabe des Standorts ab, der dann mit innerHTML ausgegeben wird.


[Bearbeiten] Error Callback

Die Geolocation.getCurrentPosition()-Methode kann noch einen zweiten Parameter zurückgeben, der bei erfolgloser Standortabfrage eine Fehlermeldung ausgibt.

Beispiel: Rückgabe von Fehlermeldungen ansehen …
navigator.geolocation.getCurrentPosition(zeigePosition, zeigeFehler); //Für Positionsabfrage
navigator.geolocation.watchPosition(zeigePosition, zeigeFehler);  //Für Verfolgung
 
function zeigeFehler(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "Benutzer lehnte Standortabfrage ab."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Standortdaten sind nicht verfügbar."
            break;
        case error.TIMEOUT:
            x.innerHTML = "Die Standortabfrage dauerte zu lange (Time-out)."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "unbekannter Fehler."
            break;
    }
}
Falls die Standortabfrage misslingt, wird die Art des Fehlers ausgegeben. Die Standortabfrage gibt neben den Breiten und Höhenangaben auch die Genauigkeit der Standortbestimmung in Metern aus.

[Bearbeiten] Position verfolgen

Mit Geolocation.watchPosition() können Sie eine Handler-Funktion registrieren, die bei jeder Positionsänderung aufgerufen wird. Diese Methode gibt auch eine watchID zurück, die benötigt wird, um die Funktion mit clearWatch(id) wieder zu löschen.

Beispiel: verfolge jede Standortänderung
var id, ziel, options;
//Verfolgen beginnen
id = navigator.geolocation.watchCurrentPosition(verfolgePosition);
 
function verfolgePosition(pos) {
  var aktuell = pos.coords;
 
  if (ziel.latitude === aktuell.latitude && ziel.longitude === aktuell.longitude) {
    console.log('Sie haben Ihr Ziel erreicht');
    //Verfolgen beenden
    navigator.geolocation.clearWatch(id);
  }
}
 
ziel = {
  latitude : 0,
  longitude: 0
};
 
options = {
  enableHighAccuracy: false,
  timeout: 5000,
  maximumAge: 0
};


[Bearbeiten] Staumeldungen

Mit einer Kombination von position.coords.heading, die die Richtung in Grad von wahrem Norden angibt, und der mit position.coords.speed ermittelten Geschwindigkeit können Sie den Verkehrsfluss überwachen. Aus dem Vergleich mit den in vorherigen Durchläufen ermittelten Durchschnittsgeschwindigkeiten können Sie erkennen, ob der Verkehr normal fließt oder die Fahrzeuge langsamer als üblich fahren.

Beispiel: Staumeldung
function positionCallback(position) {
     //wann die Position ermittelt wurde
     position.timestamp;
 
     position.coords.latitude; //dezimal Grad
     position.coords.longitude; //dezimal Grad
     position.coords.accuracy; //Meter
 
     position.coords.altitude; //Meter
     position.coords.altitudeAccuracy; //Meter
 
     position.coords.speed; //Meter pro Sek.
     position.coords.heading; //Grad von wahrem Norden
}


[Bearbeiten] GPS-Ortung

Mit der booleschen enableHighAccuracy-Eigenschaft können Sie eine GPS-Ortung, die die meisten Mobiltelefone besitzen, aktivieren/deaktivieren. Sie bringt eine noch bessere Genauigkeit, hat aber höheren Akkuverbrauch zur Folge.

Wenn die letzte GPS-Ortung länger her ist, kann es beim Initialisieren durchaus länger dauern bis die Standortangabe ermittelt wurde. Deshalb ist es ratsam eine Zeitangabe für einen timeout (in Millisekunden) anzugeben, wie lange auf einen Callback gewartet wird. Wenn alte Geodaten ausreichend sind, kann durch die Angabe von maximumAge (in Millisekunden) auf diese zurückgegriffen werden, ohne dass ständige Ortungen vorgenommen werden.

Beachten Sie: Da es hierfür separate Sicherheitsbestimmungen und Rechte gibt, kann es sein, dass der Benutzer ein weiteres Mal der Standortermittlung zustimmen muss.
Beispiel: GPS-Ortung
 navigator.geolocation.getCurrentPosition(zeigePosition, zeigeFehler, {
    enableHighAccuracy: true, 
    timeout: 5000, 
    maximumAge: 60000
 });
 navigator.geolocation.watchPosition(zeigePosition, zeigeFehler, {
    enableHighAccuracy:true
 });
Von diesen Optionen können ein, zwei oder alle drei wie folgt eingebunden werden, wobei die erste Zeile alle drei Parameter zeigt, die zweite nur einen.


[Bearbeiten] Einbindung von Karten

Noch besser und verständlicher als eine Ausgabe der geographischen Koordinaten als Dezimalzahl ist ein Einbinden von Kartenausschnitten in Ihre Webseite.

[Bearbeiten] Google Maps

Google Maps ist der größte Anbieter von Kartendiensten und stellt seine Daten Privatanwendern kostenlos zur Verfügung.[6]

Beispiel: Standortabfrage ansehen …
  var button =document.getElementById('los'); 
  button.addEventListener ('click', ermittlePosition);
  var ausgabe = document.getElementById('ausgabe');
 
function ermittlePosition() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(zeigePosition, zeigeFehler);
    } else { 
        ausgabe.innerHTML = 'Ihr Browser unterstützt keine Geolocation.';
    }
}
 
 
function zeigePosition(position) {
    var latlon = position.coords.latitude + "," + position.coords.longitude;
    var img_url = "http://maps.googleapis.com/maps/api/staticmap?center="
    +latlon+"&zoom=14&size=600x400&sensor=false";
    document.getElementById('ausgabe').innerHTML = "<img src='"+img_url+"'>";
}
Durch den Klick auf den Button wird die Funktion zeigePosition() aufgerufen. Sie ermittelt den Standort. Dieser wird in einer Anfrage an den Google-Server als Parameter an die URL angehängt. Das so erzeugte Bild wird dann ausgegeben.


Beachten Sie: Die durch Google erbrachten Leistungen sind zwar kostenlos, verraten Google aber auch Informationen über Sie und Ihre Nutzer. Die weitere Verarbeitung dieser Daten für Werbezwecke, etc. liegt außerhalb Ihres Einflussbereichs.


[Bearbeiten] OpenStreetMap

Unproblematischer (und mittlerweile oft sogar genauer) ist ein Kartenausschnitt des gemeinnützigen OpenSource-Openstreetmap-Projekts.[7]

Beispiel: Standortabfrage ansehen …
  ...
  <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
</head>
<body>
  <h1>HTML5 - Geolocation<br>aktuellen Standort in einer OpenStreetmap-Karte ausgeben</h1>
  <main>
    <p>Sobald Sie auf den Button klicken, werden Ihre Koordinaten ermittelt und in einem Kartenausschnitt ausgegeben.</p>
    <button id="los">Los!</button>
    <div id="karte"></div>
  </main>
function zeigePosition(position) {
    map = new OpenLayers.Map('karte');
    map.addLayer(new OpenLayers.Layer.OSM());
 
    var lonLat = new OpenLayers.LonLat( position.coords.longitude ,position.coords.latitude )  //Mitte der Karte angeben
          .transform(
            new OpenLayers.Projection('EPSG:4326'),  // transform from WGS 1984
            map.getProjectionObject()  // to Spherical Mercator Projection
          );
 
    var zoom= 12;
 
    var markers = new OpenLayers.Layer.Markers( 'Markers' );  //Marker einfügen
    map.addLayer(markers);
 
    markers.addMarker(new OpenLayers.Marker(lonLat));
 
    map.setCenter (lonLat, zoom);
}
Im Head ist eine von OpenStreetMap gehostete JavaScript-Datei OpenLayers.js engebunden.

Bei einem Klick auf den Button wird die Funktion zeigePostion aufgerufen, die eine Karte mit den Koordinaten ( position.coords.longitude ,position.coords.latitude ) aufruft.
Mit der Variable zoom können Sie den Zoom einstellen. Ein Wert von 1 erzeugt eine Weltkarte, höhere Werte bewirken einen kleineren Maßstasb, oberhalb eines Wert von 18 wird wieder die Weltkarte angezeigt.

Mit der Variable markers wird ein Markierungspunkt erzeugt.


Beachten Sie: Durch das externe JavaScript dauert das Laden der Seite merklich länger als beim ersten Beispiel mit Google Maps.


Auf folgenden Seiten können Sie mehr über OpenLayers erfahren:


[Bearbeiten] Weblinks

  1. W3C: Geolocation API Specification vom 11.07.2014
  2. Wikipedia: Geotargeting
  3. com-magazin: So bestimmt Google den Standort vom 19.07.2011
  4. Wikipedia: Trilateration
  5. W3C: 4 Security and privacy considerations
  6. google: Google Maps-Hilfe - Karten einbetten
  7. openstreetmap: http://wiki.openstreetmap.org/wiki/DE:Karte_in_Webseite_einbinden
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML