Heim > Web-Frontend > H5-Tutorial > Hauptteil

HTML5-Codefreigabe mithilfe von Geolokalisierung

黄舟
Freigeben: 2017-03-15 16:03:08
Original
1634 Leute haben es durchsucht

1) Geolocation verwenden:

Greifen Sie über navigator.geolocation auf die Geolocation-Funktion zu und geben Sie ein GeoStandortobjekt zurück >

1.1) Geolocation-Objektmitglieder:

get

AktuellePosition(callezurück ,errorCallback,options)——Erhalten Sie die aktuelle Position;

watchPosition(callback,error,options)——Starten Sie die Überwachung der aktuellen Position;

clearWatch(id) – Beenden Sie die Überwachung der aktuellen Position;

1.1.1) Der Browser ruft den Rückruf auf

Funktion von getCurrentPosition Wenn der Parameter übergeben wird, wird ein Positionsobjekt mit Standortdetails übergeben

                                                                                                                                                                                                               

🎜> coords – Gibt die Koordinaten des aktuellen Standorts zurück, d. >

Breitengrad – – Gibt den Breitengrad in Dezimalzahl zurück;

longitude – gibt den Längengrad in Dezimalzahl zurück;

Höhe – gibt die Höhe in Metern zurück; 🎜>

Genauigkeit – Gibt die Koordinatengenauigkeit in Metern zurück;

AltitudeAccuracy – Gibt die Höhengenauigkeit ausgedrückt in Metern zurück; die Fahrtrichtung in Grad; Geschwindigkeit – Gibt die Fahrtgeschwindigkeit in Metern pro Sekunde zurück; >

2) Umgang mit Geolokalisierungsfehlern:

Der zweite Parameter der Methode getCurrentPosition(callback,errorCallback,options), der es uns ermöglicht, eine Funktion anzugeben. Es wird aufgerufen, wenn beim Abrufen der Position ein Fehler auftritt. Diese Funktion ruft ein PositionError-Objekt ab; >

Code – gibt den Code zurück, der den Fehlertyp darstellt;

=1 – Der Benutzer ist nicht berechtigt, die Geolokalisierungsfunktion zu verwenden. =2——Die Position kann nicht bestimmt werden; =3 – Beim Versuch, den Standort anzufordern, ist eine Zeitüberschreitung aufgetreten.

Nachricht – Gibt eine Zeichenfolge zurück, die den Fehler beschreibt. 🎜>3) Geben Sie Geo-Targeting-Optionen an:

Der dritte Parameter, der von der Methode getCurrentPosition(callback, errorCallback, options) bereitgestellt wird, ist ein PositionOptions-Objekt.

Mitglieder des PositionOptions-Objekts:

enableHighAccuracy – teilt dem Browser mit, dass wir die bestmöglichen Ergebnisse wünschen

Timeout – Begrenzen Sie das Ereignis des angeforderten Standorts und legen Sie die Anzahl der Millisekunden fest, nach denen ein Timeout-Fehler gemeldet wird

MaximumAge – teilt dem Browser mit, dass wir bereit sind, zwischengespeicherte Standorte zu akzeptieren, solange diese nicht älter als die angegebene Anzahl von Millisekunden sind

4) Überwachungsort:

Die watchPosition-Methode erhält kontinuierlich Updates über die Position. Die erforderlichen Parameter sind dieselben wie bei der getCurrentPosition-Methode und funktionieren auf die gleiche Weise.

Der Unterschied ist: Wenn sich die Position ändert, wird die Rückruffunktion wiederholt aufgerufen.

       table{
           border-collapse: collapse;
       }
        th,td{
            padding: 4px;
        }
        th{
            text-align: right;
        }
Nach dem Login kopieren
    <table border="1">
        <tr>
            <th>经度:</th><td id="longitude">-</td>
            <th>纬度:</th><td id="latitude">-</td>
        </tr>
        <tr>
            <th>海拔高度:</th><td id="altitude">-</td>
            <th>坐标精度:</th><td id="accuracy">-</td>
        </tr>
        <tr>
            <th>海拔精度:</th><td id="altitudeAccuracy">-</td>
            <th>行进方向:</th><td id="heading">-</td>
        </tr>
        <tr>
            <th>速度:</th><td id="speed">-</td>
            <th>时间:</th><td id="timestamp">-</td>
        </tr>
        <tr>
            <th>错误类型:</th><td id="errcode">-</td>
            <th>错误信息</th><td id="errormessage">-</td>
        </tr>
    </table><pre name="code" class="html">    <button id="pressme">Cancel Watch</button>
Nach dem Login kopieren
        var options={
            enableHighAccuracy:false,
            timeout:2000,
            maximumAge:30000
        }
        var WatchID=navigator.geolocation.watchPosition(displayPosition,handleError,options)
        document.getElementById("pressme").onclick=function(e){
            navigator.geolocation.clearWatch(WatchID);
        }
        function displayPosition(pos){
            var properties=["longitude","latitude","altitude","accuracy","altitudeAccuracy","heading","speed"];
            for(var i=0;i<properties.length;i++){
                var value=pos.coords[properties[i]];
                document.getElementById(properties[i]).innerHTML=value;
            }
            document.getElementById("timestamp").innerHTML=pos.timestamp;
        }
        function handleError(err){
            document.getElementById("errcode").innerHTML=err.code;
            document.getElementById("errmessage").innerHTML=err.message;
        }
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonHTML5-Codefreigabe mithilfe von Geolokalisierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!