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>Nach dem Login kopieren
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;
}
}Nach dem Login kopieren
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='"+img_url+"' />";
}Nach dem Login kopieren
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;
}
</scriptNach dem Login kopieren
[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!
