Raid on HTML5 Javascript API Extension 2 – Geographical Information Services and Geolocation API Learning_html5 Tutorial Skills

Eine der beliebtesten Arten von Diensten wird heute als standortbasierter Dienst (Location Based Service, LBS) bezeichnet. Dabei handelt es sich um Informationen, die Unternehmen nutzen, um Dienste in der Nähe der Koordinaten eines bestimmten Punkts (z. B. des Standorts des Benutzers) bereitzustellen. wie etwa verwandte Dienste. In HTML5 wird eine neue Geolokalisierungs-API hinzugefügt, um die Geolokalisierung zu ermitteln und zu teilen.
Datenschutzerklärung
Datenschutz ist ein Problem, wenn Sie Ihren physischen Standort mit einem Remote-Webserver teilen. Daher erfordert die Geolocation-API, dass Benutzer ihre Erlaubnis erteilen, bevor eine Webanwendung auf Standortinformationen zugreifen kann. Wenn Sie zum ersten Mal eine Webseite besuchen, die Geolokalisierungsdaten anfordert, zeigt Ihr Browser eine Benachrichtigungsleiste an, die Zugriff auf den Standort des Benutzers bietet. Folgen Sie den Anweisungen des Browsers und wählen Sie die entsprechende Berechtigung aus.
Standortinformationen werden der Webanwendung nicht zur Verfügung gestellt, wenn der Benutzer keine Erlaubnis erteilt. Der Aufruf der entsprechenden API löst keinen Erfolgsrückruf aus.
Überprüfen Sie die Browserunterstützung
Die Geolokalisierungs-API wird in den neuesten Versionen der Mainstream-Browser unterstützt, aber Sie müssen die Kompatibilität mit älteren Browsern noch überprüfen. Wenn die Geolocation-API nicht verfügbar ist, ist window.navigator.geolocation null, wie unten gezeigt:

Code kopieren

Der Code lautet wie folgt:

function show_islocationenabled()
{
var str = "Nein, Geolokalisierung wird nicht unterstützt.";
if (window.navigator.geolocation) {
str = "Ja, Geolokalisierung wird unterstützt.";
alert( str );


Die Geolocation-API basiert auf einem neuen Attribut von Das globale Navigator-Objekt: navigator.geolocation. Dieses Objekt stellt einige nützliche Informationen über den Browser und das System des Besuchers bereit. Geolokalisierungsinformationen können auf viele Arten abgerufen werden: beispielsweise über Basisstationen, Webdatenbanken oder GPS. Auch die Genauigkeit der mit verschiedenen Methoden ermittelten Geolocation-Informationen ist unterschiedlich. Normalerweise ist die über GPS erzielte Genauigkeit am genauesten (GPS wird am häufigsten auf mobilen Plattformen verwendet, und Netzwerkdaten werden grundsätzlich auf PC-Plattformen verwendet). An einigen Standorten kann es vorkommen, dass Sie keine eindeutige Geolokalisierungsanzeige erhalten oder überhaupt keine Daten erhalten.

Lokalisieren Sie die aktuelle Position
Verwenden Sie die Methode getCurrentPosition() von navigator.geolocation, um den aktuellen Standort des Benutzers abzurufen. Wenn diese Methode von einem Skript aufgerufen wird, versucht die Methode asynchron, den aktuellen Standort des Hostgeräts abzurufen.

Code kopierenDer Code lautet wie folgt:

Methodensignatur: getCurrentPosition(geolocationSuccessCallback ,[geolocationErrorCallback ,geolocationOptions]);

　1. geolocationSuccessCallback: Der Rückruf nach erfolgreicher Ermittlung des aktuellen Standorts (erforderlich)
　2. geolocationErrorCallback. Der Rückruf, der verwendet wird, wenn ein Fehler auftritt (optional)
　3. geolocationOptions. Geographie-Positionsoption (optional)


Verarbeitung von Positionsinformationen

Die Methode getCurrentPositon() speichert die Positionsinformationen in einem Positionsobjekt, nachdem die aktuelle Position erfolgreich abgerufen wurde, und führt dieses Objekt dann als Parameter aus geolocationSuccessCallback dieser Rückruf. In dieser Rückruffunktion können Sie mit den in diesem Objekt enthaltenen Informationen machen, was Sie wollen.
Positionsobjekt hat zwei Attribute: Zeitstempel und Koordinaten. Das Zeitstempelattribut stellt die Erstellungszeit der geografischen Standortdaten dar, und das Koordinatenattribut stellt die geografischen Standortinformationen dar, die sieben Attribute enthalten:

Code kopieren Der Code lautet wie folgt:

. coords.latitude: geschätzter Breitengrad

🎜>. coords.accuracy: alle Die Genauigkeit der bereitgestellten Längen- und Breitengradschätzungen in Metern. coords.altitudeAccuracy: Die Genauigkeit der bereitgestellten Höhenschätzungen in Metern Das Host-Gerät bewegt sich derzeit im Uhrzeigersinn relativ zum wahren Norden
coords.speed: Die aktuelle Geschwindigkeit über Grund des Geräts in Metern pro Sekunde


Im Allgemeinen sind drei dieser Eigenschaften garantiert: coords.latitude, coords.longitude und coords.accuracy, und der Rest gibt null zurück. Dies hängt von den Fähigkeiten des Geräts und des verwendeten Backend-Positionierungsservers ab. Darüber hinaus können die Kurs- und Geschwindigkeitsattribute basierend auf dem vorherigen Standort des Benutzers berechnet werden.
Fehlerbehandlung
Wenn beim Ausführen der Methode getCurrentPositon() ein Fehler auftritt, übergibt die Methode ein PositionError-Objekt an den Rückruf geolocationErrorCallback.
Geolocation-Optionen festlegen
Sie können drei Eigenschaften von GeolocationOptions festlegen:

Code kopieren

Der Code lautet wie folgt:

enableHighAccuracy: Wenn das Gerät hohe Genauigkeit unterstützt, gibt diese Option an, ob hohe Genauigkeit aktiviert werden soll.
timeout: Abfrage-Timeout
maximumAge: Die maximale Zeit für den zwischengespeicherten Ort, während der der Cache verwendet werden kann.

Sehen Sie sich das vollständige Beispiel unten an:

Kopieren Sie den Code

Der Code ist wie folgt folgt:

position:Try It

;script>
var x=document.getElementById("demo");
function getLocation() {
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else{
x.innerHTML="Geolocation wird von diesem Browser nicht unterstützt.";
}
}
function showPosition(position) {
var latlon= position.coords.latitude "," position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
latlon "&zoom=9&size=400x300&sensor =false";
document.getElementById("mapholder").innerHTML="";
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML="Benutzer hat die Anfrage für die Geolokalisierung abgelehnt."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML ="Standortinformationen sind nicht verfügbar."
break;
case error.TIMEOUT:
x.innerHTML="Die Anforderung zum Abrufen des Benutzerstandorts ist abgelaufen." UNKNOWN_ERROR:
x.innerHTML="Ein unbekannter Fehler ist aufgetreten."
}
}
/html>


Dieses Beispiel ermittelt den geografischen Standort des aktuellen Geräts und zeigt ihn in Google Maps an. Natürlich können Sie die statische Platte in der Baidu Map API verwenden, um dieses Beispiel umzuwandeln. Informationen zur Baidu-Karten-API finden Sie später in der praktischen Referenz unter dem Link.

Kontinuierliche Positionierung aktivieren/deaktivieren

Verwenden Sie die watchPosition()-Methode von navigator.geolocation, um den Standort des Benutzers regelmäßig abzufragen, um festzustellen, ob sich der Standort des Benutzers geändert hat. Diese Methode verfügt über drei Parameter: Diese drei Parameter sind dieselben wie die Methode getCurrentPosition (), einen Rückruf nach Erfolg, einen Rückruf nach Fehler und eine Option zum Abrufen von Positionsinformationen. Diese Methode verfügt über einen Rückgabewert watchID, der zum Abbrechen verwendet wird Kontinuierliche Positionierung.
Verwenden Sie die Methode „clearWatch()“ von navigator.geolocation, um die laufende Funktion „watchPosition()“ zu beenden. Diese Methode benötigt nur einen Parameter „watchID“.
Sehen Sie sich das folgende Beispiel an:

Kopieren Sie den Code

Der Code lautet wie folgt:

• Das Vollbild-Bildlauf-Plug-in AlloyTouch erstellt in 30 Sekunden eine flüssige H5-Seite
• Tatsächlicher HTML5-Kampf und Analyse von Touch-Ereignissen (Touchstart, Touchmove und Touchend)
• Ausführliche Erläuterung der Beispiele für Bildzeichnungen in HTML5 Canvas 9
• Reguläre Ausdrücke und neue HTML5-Elemente
• So kombinieren Sie NodeJS und HTML5, um mehrere Dateien per Drag-and-Drop auf den Server hochzuladen