Latest web development tutorials

HTML5 geopositioning

HTML5 Geolocation (geopositioning) verwendet den Standort des Benutzers zu lokalisieren.


Suchen Sie die Position des Benutzers

HTML5 Geolocation API Standort des Benutzers zu erhalten.

Im Hinblick auf diese Funktion kann die Privatsphäre der Nutzer verletzen, es sei denn, der Benutzer nichts anderes vereinbart, ist der Standort des Nutzers Informationen nicht zur Verfügung.


Browser-Unterstützung

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9+, Firefox, Chrome, Safari und Opera unterstützen Geolokalisierung (geographische Lage).

Hinweis: Geolokalisierung (geopositioning) Bei Geräten mit GPS, wie iPhone, geopositioning genauer.


HTML5 - Verwenden Sie Geo-Targeting

Verwenden Sie getCurrentPosition () -Methode den Standort des Benutzers zu erhalten.

Das folgende Beispiel ist eine einfache geolocation Beispiel kann der Benutzer an dem Standort Breite und Länge zurückzukehren:

Beispiele

var x = document.getElementById ( "Demo");
Funktion getLocation ()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition (showPosition);
}
sonst
{
x.innerHTML = "Dieser Browser unterstützt keine Stelle bekommen.";
}
}

Funktion showPosition (Position)
{
x.innerHTML = "Lat:" + position.coords.latitude +
"<br> Länge:" + position.coords.longitude;
}

Versuchen »

Analyse Beispiele:

  • Es ist für geopositioning getestet
  • Falls unterstützt, laufen getCurrentPosition () -Methode. Wenn nicht, wird eine Nachricht an den Benutzer.
  • Wenn getCurrentPosition () erfolgreich ist, um die Funktion, die Parameter zurückgeben, die in einem showPosition Zielkoordinaten angegeben
  • showPosition () Funktion ruft und zeigt die Breite und die Länge

Das obige Beispiel ist ein sehr einfaches Skript geopositioning, fehlerfreie Handhabung.


Behandeln von Fehlern und abgelehnt

Der zweite Parameter getCurrentPosition () Methode für die Fehlerbehandlung. Es gibt an, wann die Funktion get zu laufen, wenn die Position des Benutzers fehlgeschlagen:

Beispiele

Funktion Error-(Fehler)
{
Schalter (error.code)
{
Fall error.PERMISSION_DENIED:
x.innerHTML = "Benutzer abgelehnt Standortanfrage zu bekommen."
brechen;
Fall error.POSITION_UNAVAILABLE:
x.innerHTML = "Standortinformationen ist nicht verfügbar."
brechen;
Fall error.TIMEOUT:
x.innerHTML = "Request Benutzerstandort abgelaufen."
brechen;
Fall error.UNKNOWN_ERROR:
x.innerHTML = "Unbekannter Fehler."
brechen;
}
}

Versuchen »

Fehlercode:

  • Zugriff verweigert - Benutzer ist nicht erlaubt geopositioning
  • Position nicht verfügbar - kann nicht die aktuelle Position zu bekommen
  • Timeout - Die Operation timed out

Suchergebnisse in der Karte

Um die Ergebnisse in einer Karte anzuzeigen, benötigen Sie den Zugriff auf die Breite und die Länge der Kartendienste wie Google Maps oder Baidu Karte verwenden:

Beispiele

Funktion 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 ( "Kartenhalter") innerHTML- = "<img src = '" + img_url + ">" .;
}

Versuchen »

In dem obigen Beispiel verwenden wir Breiten- und Längendaten durch die Anzeigeposition zurückgeführt (unter Verwendung von statischen Bildern) auf Google Maps.

Google Maps Skript
Der obige Link zeigt Ihnen, wie Sie ein Skript verwenden, um eine interaktive Karte mit einem Marker, Zoom und ziehen Optionen anzuzeigen.


Um die Informationen zu bestimmten Ort

Diese Seite zeigt, wie die Position des Benutzers angezeigt werden auf einer Karte. Jedoch Geolocation Informationen für einen bestimmten Standort ist auch sehr nützlich.

Beispiel:

  • Aktualisieren Sie lokale Informationen
  • Anzeige befinden sich rund um den Benutzer
  • Interaktive Fahrzeugnavigationssystem (GPS)

getCurrentPosition () -Methode - Rückgabedaten

T wenn sie erfolgreich sind, gibt getCurrentPosition () -Methode ein Objekt. Immer wieder die Breite, Länge und Genauigkeit Eigenschaften. Falls vorhanden, wird die folgende zusätzliche Eigenschaft zurückgegeben.

属性 描述
coords.latitude 十进制数的纬度
coords.longitude 十进制数的经度
coords.accuracy 位置精度
coords.altitude 海拔,海平面以上以米计
coords.altitudeAccuracy 位置的海拔精度
coords.heading 方向,从正北开始以度计
coords.speed 速度,以米/每秒计
timestamp 响应的日期/时间


Geolocation-Objekt - andere interessante Methoden

watchPosition () - Liefert die aktuelle Position des Benutzers und auch weiterhin die aktualisierte Position zurückzukehren (wie GPS auf ein Auto), wenn sich der Benutzer bewegt.

clearWatch () - Stopp watchPosition () -Methode

Das folgende Beispiel zeigt watchPosition () -Methode. Sie benötigen eine genaue GPS-Gerät die Fälle (wie zB iPhone) zu testen:

Beispiele

var x = document.getElementById ( "Demo");
Funktion getLocation ()
{
if (navigator.geolocation)
{
navigator.geolocation.watchPosition (showPosition);
}
sonst
{
x.innerHTML = "Dieser Browser unterstützt keine Stelle bekommen.";
}
}
Funktion showPosition (Position)
{
x.innerHTML = "Lat:" + position.coords.latitude +
"<br> Länge:" + position.coords.longitude;
}

Versuchen »