Wie verwende ich die HTML-Geolokalisierung in HTML5 richtig?

Es besteht kein Zweifel, dass HTML5 ein heißes Thema für Entwickler ist. Wenn Sie die Grundprinzipien der HTML5-Funktionen schnell verstehen müssen, erläutert dieser Artikel hauptsächlich die HTML5-Geolokalisierung.

Verwendung von HTML5-Geolokalisierung

HTML5-Geolokalisierung wird verwendet, um den Standort des Benutzers zu lokalisieren.

Lokalisieren Sie den Standort des Benutzers

HTML5 Geolocation API wird verwendet, um den geografischen Standort des Benutzers zu ermitteln.

Da diese Funktion möglicherweise die Privatsphäre des Benutzers verletzt, sind Informationen zum Benutzerstandort nicht verfügbar, es sei denn, der Benutzer stimmt zu.

Browser-Unterstützung

Internet Explorer 9, Firefox, Chrome, Safari und Opera unterstützen Geolokalisierung.

Hinweis: Die Geolokalisierung ist für Geräte mit GPS, wie zum Beispiel das iPhone, genauer.

HTML5 – Geolocation verwenden

Bitte verwenden Sie die Methode getCurrentPosition(), um den Standort des Benutzers zu ermitteln.

Das folgende Beispiel ist ein einfaches Geolokalisierungsbeispiel, das den Längen- und Breitengrad des Standorts des Benutzers zurückgibt.

Hier sind Beispiele:

<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>

Erklärung der Beispiele:

Erkennen Sie, ob Geolokalisierung unterstützt wird

Wenn unterstützt, führen Sie getCurrentPosition( ) Methode. Wenn dies nicht unterstützt wird, wird dem Benutzer eine Meldung angezeigt.

Wenn getCurrentPosition() erfolgreich ausgeführt wird, wird ein Koordinatenobjekt an die im Parameter showPosition angegebene Funktion zurückgegeben

Die Funktion showPosition() ruft den Längen- und Breitengrad ab und zeigt ihn an

Das obige Beispiel ist ein sehr einfaches Geolocation-Skript ohne Fehlerbehandlung.

Umgang mit Fehlern und Ablehnungen

Der zweite Parameter der getCurrentPosition()-Methode wird zur Fehlerbehandlung verwendet. Es gibt eine Funktion an, die ausgeführt werden soll, wenn das Abrufen des Standorts des Benutzers fehlschlägt:

Es gibt auch eine Instanz:

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;
    }
  }

Fehlercode:

Berechtigung verweigert – Geolokalisierung ist nicht zulässig der Benutzer

Position nicht verfügbar – Die aktuelle Position kann nicht abgerufen werden

Zeitüberschreitung – Betriebszeitüberschreitung

Ergebnisse auf der Karte anzeigen

Um die Ergebnisse in der Karte anzuzeigen, müssen Sie auf einen Kartendienst zugreifen, der Breiten- und Längengrade verwenden kann, wie zum Beispiel Google Maps oder Baidu Maps:

Es gibt auch Beispiele:

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=&#39;"+img_url+"&#39; />";
}

In Im obigen Beispiel verwenden wir die zurückgegebenen Breiten- und Längengraddaten in der Google Maps-Anzeigeposition (unter Verwendung eines statischen Bildes).

Der Link oben zeigt Ihnen, wie Sie mithilfe eines Skripts eine interaktive Karte mit Markierungen, Zoom- und Ziehoptionen anzeigen.

Informationen für einen bestimmten Standort

Diese Seite zeigt, wie der Standort des Benutzers auf einer Karte angezeigt wird. Die Geolokalisierung ist jedoch auch nützlich, um Informationen über einen bestimmten Standort zu erhalten.

Lokale Informationen aktualisieren

Sehenswürdigkeiten in der Umgebung des Benutzers anzeigen

Interaktives Autonavigationssystem (GPS)

getCurrentPosition()-Methode – Daten zurückgeben

Bei Erfolg gibt die Methode getCurrentPosition() das Objekt zurück. Die Eigenschaften Breite, Länge und Genauigkeit werden immer zurückgegeben. Falls verfügbar, werden die anderen folgenden Eigenschaften zurückgegeben.

Attribute und Beschreibungen:

coords.latitude (Breitengrad als Dezimalzahl)

coords.longitude (Längengrad als Dezimalzahl)

coords. Genauigkeit( Positionsgenauigkeit)

coords.altitude (Höhe, in Metern über dem Meeresspiegel)

coords.altitudeAccuracy (Höhengenauigkeit der Position)

coords.heading (Richtung , von Ausgehend vom wahren Norden in Grad)

coords.speed (Geschwindigkeit in Metern pro Sekunde)

Zeitstempel (Datum/Uhrzeit der Antwort)

Geolocation-Objekt – Sonstiges Interessant Methode

watchPosition() – gibt die aktuelle Position des Benutzers zurück und gibt weiterhin die aktualisierte Position zurück, wenn sich der Benutzer bewegt (wie ein GPS in einem Auto).

clearWatch() – Stoppt die watchPosition()-Methode

Das folgende Beispiel zeigt die watchPosition()-Methode. Sie benötigen ein genaues GPS-Gerät, um dieses Beispiel zu testen (z. B. ein iPhone):

Es gibt Beispiele:

<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

[Verwandte Empfehlungen]

Die Entwicklungsgeschichte von HTML und HTML5

Die Grundelemente von HTML, damit Sie HTML von Grund auf lernen können

Das obige ist der detaillierte Inhalt vonWie verwende ich die HTML-Geolokalisierung in HTML5 richtig?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!