Zusammenfassung der Entwicklung und Anwendung der API-Schnittstelle zur geografischen Standortpositionierung in HTML5_HTML5-Tutorialfähigkeiten-H5-Tutorial-php.cn

Zusammenfassung der Entwicklung und Anwendung der API-Schnittstelle zur geografischen Standortpositionierung in HTML5_HTML5-Tutorialfähigkeiten

WBOY

Freigeben： 2016-05-16 15:50:40

Original

1377 Leute haben es durchsucht

Mehrere Methoden zur Geolokalisierung: IP-Adresse, GPS, WLAN, GSM/CDMA

Geolocation-Erfassungsprozess :
1 Der Benutzer öffnet die Webanwendung, die die Geolokalisierung abrufen muss.
2. Die Anwendung fordert den geografischen Standort vom Browser an und der Browser zeigt eine Abfrage an, in der der Benutzer gefragt wird, ob er den geografischen Standort teilen möchte.
3. Sofern der Benutzer dies zulässt, fragt der Browser die relevanten Informationen vom Gerät ab.
4. Der Browser sendet relevante Informationen an einen vertrauenswürdigen Standortserver und der Server gibt den spezifischen geografischen Standort zurück.

Implementierung des geografischen Standorts von HTML5:
1. Implementieren Sie eine browserbasierte Technologie (ohne Back-End-Unterstützung), um den geografischen Standort des Benutzers zu ermitteln.
2 Geografischer Standort (Die Genauigkeit beträgt je nach Gerät bis zu 10 m)
3. Verfolgen Sie kontinuierlich den geografischen Standort des Benutzers
4. Interagieren Sie mit Google Map oder Baidu Map, um Standortinformationen anzuzeigen

Geolocation API wird verwendet, um Benutzer zu verbinden. Die aktuellen geografischen Standortinformationen werden mit vertrauenswürdigen Websites geteilt, was Datenschutz- und Sicherheitsprobleme für Benutzer mit sich bringt. Wenn eine Website daher den aktuellen geografischen Standort des Benutzers ermitteln muss, fordert der Browser den Benutzer auf, „Zulassen“ oder „zuzulassen“. leugnen".
Überprüfen Sie zunächst, welche Browser die Geolocation-API unterstützen:
IE9.0, FF3.5, Safari5.0, Chrome5.0, Opera10.6, IPhone3.0, Android2.0
Die Geolocation-API ist im Navigator vorhanden Objekt enthält nur 3 Methoden:

Code kopieren

Der Code lautet wie folgt:

1. getCurrentPosition //Aktuelle Position
2. watchPosition //Überwachungsposition
3. clearWatch //Überwachung löschen
navigator.geolocation.getCurrentPosition( …, function(error){
switch(error . code){
case error.TIMEOUT :
alert( „Verbindungszeitüberschreitung, bitte versuchen Sie es erneut“ );
break
case error.PERMISSION_DENIED :
alert( „Sie haben dies abgelehnt Standortfreigabedienst verwenden, Abfrage wurde abgebrochen" );
Pause;
Fallfehler.POSITION_UNAVAILABLE :
alert( ", Leider sind die Standortdienste für Ihren Planeten vorübergehend nicht verfügbar" );
Pause;
}
});

watchPosition ist wie ein Tracker gepaart mit clearWatch.
watchPosition und clearWatch funktionieren ein bisschen wie setInterval und clearInterval.
var watchPositionId = navigator.geolocation.watchPosition(success_callback, error_callback, options);
navigator.geolocation.clearWatch(watchPositionId );

HTML 5 stellt eine Reihe von APIs bereit, z. B. den geografischen Standort Benutzer mit Es ist für Benutzer praktisch, geografische LBS-Anwendungen zu erstellen. Wenn die API aktiviert ist, wird der Benutzer zunächst gefragt, ob er der Verwendung der API zustimmt. Andernfalls wird sie nicht aktiviert um die Sicherheit zu gewährleisten.
1. Aktivieren Sie es, um festzustellen, ob der Browser die LBS-API unterstützt

Code kopieren

Code wie folgt:

function isGeolocationAPIAvailable()
{
var location = „Nein, Geolocation wird von diesem Browser nicht unterstützt.“; geolocation) {
location = „Ja, Geolocation wird von diesem Browser unterstützt.“; es gibt immer noch displayError In der Methode wird die Ausnahme abgefangen

2. Rufen Sie den geografischen Standort des Benutzers ab

Verwenden Sie einfach getCurrentPosition; >
Code kopieren

Der Code lautet wie folgt:
function requestPosition() {
if (nav == null) {
nav = window.navigator;

}

if (nav != null) { var geoloc = nav.geolocation; if (geoloc != null) { geoloc.getCurrentPosition(successCallback) ; }

else {

alert("Geolocation API wird in Ihrem Browser nicht unterstützt");

else {
alert("Navigator wurde nicht gefunden ");
}
}

Wenn der geografische Standort erfolgreich ermittelt wurde, wird eine Rückrufmethode generiert, um das zurückgegebene Ergebnis zu verarbeiten,

Code kopieren

Der Code lautet wie folgt:

function setLocation(val, e) {

document.getElementById(e ).value = val;
}
function successCallback(position)
{

setLocation(position.coords.latitude, "latitude"); setLocation(position.coords.longitude, "longitude") ;

} 3. Eine sehr häufige Frage ist, wie der sich ändernde geografische Standort des Benutzers verfolgt werden kann. Hier finden Sie eine Zusammenfassung der beiden verwendeten APIs.

1 watchPosition

Das Beispiel sieht wie folgt aus:

Code kopieren

Der Code lautet wie folgt:

Dann können Sie im successCallback den zuletzt anzuzeigenden geografischen Standort festlegen:

Kopieren Sie den Code Der Code lautet wie folgt:

function successCallback(position){
setText(position.coords.latitude, "latitude"); setText(position.coords.longitude, "longitude"); >}

Wenn Sie kein Echtzeit-Tracking wünschen, können Sie es abbrechen:

function clearWatch(watchID) {
window.navigator.geolocation.clearWatch(watchID); 🎜>}

4. So gehen Sie mit Ausnahmen um

Wenn Sie auf eine Ausnahme stoßen, können Sie sie abfangen:

Kopieren Sie den Code

Der Code lautet wie folgt:

if (geoloc != null) {

geoloc.getCurrentPosition(successCallback, errorCallback); }

function errorCallback(error) {
var message = "";
switch (error.code) {
case error.PERMISSION_DENIED:
message = "Diese Website hat keine Berechtigung dazu verwende „
„die Geolocation-API“;
break;
case error.POSITION_UNAVAILABLE:
message = „Die aktuelle Position konnte nicht ermittelt werden.“;
break;
case error .PERMISSION_DENIED_TIMEOUT:
message = "Die aktuelle Position konnte nicht innerhalb des angegebenen Timeout-Zeitraums ermittelt werden."
break
}
if (message == "") {
var strErrorCode = error.code.toString();
message = " Die Position konnte aufgrund eines unbekannten Fehlers nicht ermittelt werden (Code: " strErrorCode ").";
Alarm(Nachricht);
}

5. Zeigen Sie den Standort auf Google Maps an (vorausgesetzt, Google Map API und andere Einstellungen sind eingerichtet)

Code kopieren

Der Code lautet wie folgt:

Funktion getCurrentLocation() { if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(showMyPosition,showError );

}

else
{
alert("Nein, Geolocation API ist wird von diesem Browser nicht unterstützt.");
}
}
function showMyPosition(position)
{
var Koordinaten=position.coords.latitude "," position.coords.longitude;
var map_url="http://maps.googleapis.com/maps/api/staticmap?center="
Koordinaten "&zoom=14&size=300x300&sensor=false"
document.getElementById("googlemap") .innerHTML="

";
}
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
alert("Diese Website hat keine Berechtigung zur Verwendung der Geolocation-API")
break;
case error.POSITION_UNAVAILABLE:
alert("Die aktuelle Position konnte nicht ermittelt werden ermittelt.")
break;
case error.TIMEOUT:
alert("Die aktuelle Position konnte nicht ermittelt werden.") Position konnte innerhalb des angegebenen Timeout-Zeitraums nicht ermittelt werden.")
break;
case error.UNKNOWN_ERROR:
alert("Die Position konnte aufgrund eines unbekannten Fehlers nicht ermittelt werden.")
break;
}