Die HTML-Geolocation API wird verwendet, die Position eines Benutzers zu suchen.
Was ist W3C Geolocation API?
Das W3C Geolocation API ist ein Versuch, durch das World Wide Web Consortium (W3C) eine Schnittstelle zu standardisieren die geographische Standortinformationen für eine clientseitige Gerät abzurufen.
Es definiert eine Reihe von Objekten, ECMAScript-Standard kompatibel ist, dass die Client-Gerätestandort durch die Beratung von Standortinformation Server in der Client-Anwendung ausführt geben, die für den Application Programming Interface transparent sind (API).
Die häufigsten Quellen von Positionsinformationen sind IP-Adresse, WLAN und Bluetooth-MAC-Adresse, radio-frequency identification (RFID), Wi-Fi-Verbindung Ort oder Gerät Global Positioning System (GPS) und GSM / CDMA-Zellen-IDs.
Der Standort wird mit einer bestimmten Genauigkeit zurückgegeben auf der beste Standort-Informationsquelle in Abhängigkeit zur Verfügung.
Einsatz in Web-Browsern
Webseiten können die Geolocation API direkt verwenden, wenn der Web-Browser bereitstellt. Historisch gesehen, könnte einiger Browser-Unterstützung über die Google Gears-Plugin gewinnen, aber das war im Jahr 2010 und die serverseitige API es hing davon ab, hielt im Jahr 2012 reagiert eingestellt.
Das Geolokation API ist ideal für mobile Geräte wie Personal Digital Assistants (PDA) und Smartphones, um Web-Anwendungen geeignet. Auf Desktop-Computern, seit Version die W3C Geolocation API in Firefox funktioniert 3.5, Google Chrome, Opera 10.6, Internet Explorer 9.0 und Safari 5. Auf mobilen Geräten funktioniert es auf Android (Firmware 2.0+), iOS, Windows Phone und Maemo.
24 für Android und Symbian-Geräte (S60 Generationen 3 und 5) seit November 2010 - Der W3C Geolocation API wird auch von Opera Mobile 10.1 unterstützt.
Google Gears Geolocation vorgesehen Unterstützung für ältere und nicht-kompatiblen Browsern, einschließlich Internet Explorer 7.0+ als Gears-Plugin, und Google Chrome, die Gears nativ implementiert. Es unterstützt auch Geolocation auf mobilen Geräten als Plugin für den Android-Browser (pre Version 2.0) und Opera Mobile für Windows Mobile.
Allerdings ist die Google Gears Geolocation API mit dem W3C Geolocation API nicht kompatibel und wird nicht mehr unterstützt.
Eigenschaften
Das Ergebnis der W3C Geolokation API gibt in der Regel 4 Position Eigenschaften, einschließlich Breiten- und Längengrad (Koordinaten), Höhe (Höhe) und [Genauigkeit der Position gesammelt], die alle auf dem Standortquellen abhängen.
In einigen Abfragen keinen Wert Höhe ergeben oder zurückgeben kann.
Suchen Sie die Position des Benutzers
Die HTML-Geolocation-API verwendet, um die geographische Position eines Benutzers zu erhalten.
Da diese Privatsphäre gefährden können, ist die Position nicht verfügbar, wenn der Benutzer sie genehmigt.
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die Geolokalisierung voll unterstützt.
| API | |||||
|---|---|---|---|---|---|
| Geolocation | 5.0 | 9.0 | 3.5 | 5.0 | 16.0 |
Note: Geolokalisierung ist viel genauer für Geräte mit GPS, wie iPhone .
Mit HTML Geolokalisierung
Die getCurrentPosition() Methode wird die Position des Benutzers zu erhalten.
Das folgende Beispiel gibt den Breiten- und Längengrad der Position des Benutzers:
Beispiel
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script> Versuch es selber " Beispiel erläutert werden:
- Überprüfen Sie, ob Geolokalisierung unterstützt wird
- Wenn unterstützt, führt die getCurrentPosition() Methode. Wenn nicht, geben Sie eine Meldung an den Benutzer
- Wenn die getCurrentPosition() Methode erfolgreich ist, gibt er eine Koordinaten an das Funktionsobjekt in dem Parameter angegebenen (showPosition)
- Die showPosition() Funktion gibt die Breite und Länge
Das obige Beispiel ist ein sehr einfaches Geolokalisierung Skript, ohne Fehlerbehandlung.
Fehlerbehandlung und Ablehnungen
Der zweite Parameter der getCurrentPosition() Methode wird verwendet , um Fehler zu behandeln. Es gibt eine Funktion ausführen, wenn sie den Standort des Nutzers erhalten fehlschlägt:
Beispiel
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
} Versuch es selber " Anzeige der Ergebnisse in einer Karte
Um das Ergebnis in einer Karte anzuzeigen, benötigen Sie Zugriff auf einen Kartendienst wie Google Maps.
Im Beispiel unten wird die zurück geografische Breite und Länge verwendet , um die Lage in einer Google Map zu zeigen (using a static image) :
Beispiel
function showPosition(position) {
var latlon = position.coords.latitude + "," + position.coords.longitude;
var img_url = "http://maps.googleapis.com/maps/api/staticmap?center=
"+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
} Versuch es selber " Google Map Script
Wie ein interaktiv Google Map mit einem Marker, Zoom und ziehen Optionen anzuzeigen.
Standortspezifische Informationen
Diese Seite gezeigt, wie auf einer Karte die Position eines Benutzers zu zeigen.
Geolokalisierung ist auch sehr nützlich für die standortspezifischen Informationen, wie zB:
- Up-to-date lokale Informationen
- Zeige Points-of-Interest in der Nähe des Benutzers
- Turn-by-Turn - Navigation (GPS)
Die getCurrentPosition() Methode - Return Daten
Die getCurrentPosition() Methode gibt ein Objekt , wenn es erfolgreich ist. Die Breite, Länge und Genauigkeit Eigenschaften werden immer zurückgegeben. Die anderen Eigenschaften sind, wenn verfügbar zurückgegeben:
| Eigentum | Kehrt zurück |
|---|---|
| coords.latitude | Die Breite als Dezimalzahl |
| coords.longitude | Die Länge als Dezimalzahl |
| coords.accuracy | Die Genauigkeit der Positions |
| coords.altitude | Die Höhe in Metern über dem mittleren Meeresspiegel |
| coords.altitudeAccuracy | Die Höhe Genauigkeit der Positions |
| coords.heading | Die Position wie Grad im Uhrzeigersinn von Norden |
| coords.speed | Die Geschwindigkeit in Metern pro Sekunde |
| timestamp | Das Datum / Uhrzeit der Antwort |
Geolocation-Objekt - Andere interessante Methoden
watchPosition() - Liefert die aktuelle Position des Benutzers und setzt aktualisierte Position wie der Benutzer bewegt zurückzukehren (like the GPS in a car) .
clearWatch() - Stoppt die watchPosition() Methode.
Das folgende Beispiel zeigt die watchPosition() Methode. Sie benötigen ein genaues GPS - Gerät dies zu testen (like iPhone ) :
Beispiel
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script> Versuch es selber "