HTML5-Leitfaden-4. Verwenden Sie Geolocation, um die Fähigkeiten der Positionierungsfunktion_html5 zu implementieren-H5-Tutorial-php.cn

HTML5-Leitfaden-4. Verwenden Sie Geolocation, um die Fähigkeiten der Positionierungsfunktion_html5 zu implementieren

WBOY

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

Original

1539 Leute haben es durchsucht

Was wir heute lernen werden, ist die Verwendung von Geolocation zur Implementierung von Positionierungsfunktionen. Wir können das Geolocation-Objekt über navigator.geolocation abrufen, das die folgenden Methoden bereitstellt:
getCurrentPosition(callback,errorCallback,options): Aktuelle Position abrufen;
watchPosition(callback,error,options): Mit der Überwachung des Stroms beginnen position;
clearWatch(id): Stoppen Sie die Überwachung des aktuellen Standorts.
Hinweis: Der im folgenden Beispiel verwendete Browser ist Chrome. Wenn Sie andere Browser verwenden, kann ich nicht garantieren, dass die laufenden Ergebnisse mit den im Beispiel angezeigten Ergebnissen übereinstimmen.
1. Holen Sie sich die aktuelle Position
Wir verwenden die Methode getCurrentPosition, um die Positionsinformationen direkt in Form eines Ergebnisses zurückzugeben Callback-Funktion zur Verarbeitung. Es kann zu Verzögerungen beim Erhalt der Koordinaten kommen und Sie werden um Zugangsberechtigungen gebeten. Schauen wir uns das folgende Beispiel an:

Kopieren Sie den Code

Der Code lautet wie folgt:

< !DOCTYPE HTML> Collapse;}
th, td{padding: 4px;}
th{text-align: right;}

< ;table border="1">
Längengrad: /td>
Latitude:- ;
Höhe: >- - 🎜>< /tr>
<script> navigator.geolocation.getCurrentPosition(displayPosition); function displayPosition(pos) { var Properties = ['longitude', 'latitude', 'altitude', 'accuracy', 'altitudeAccuracy ', 'heading', 'speed']; for (var i = 0, len = Properties.length; i < len; i ) { var value = pos.coords[properties[i]] ; document.getElementById(properties[i]).innerHTML = value; document.getElementById('timestamp').innerHTML = pos.timestamp; script> </body> erhalten wurde. Zu den Koordinaten gehören die folgenden Attribute: Breitengrad: Längengrad; Höhe: Genauigkeit (Meter); zweite) . Abhängig vom Gerät, auf dem Sie Ihren Browser hosten, werden nicht alle Informationen zurückgegeben. Mobile Geräte mit GPS, Beschleunigungsmesser und Kompass geben die meisten Informationen zurück, Heimcomputer jedoch nicht. Die vom Heimcomputer erhaltenen Standortinformationen hängen von der Netzwerkumgebung oder dem WLAN ab. Schauen wir uns die Ergebnisse des obigen Beispiels an. Klicken Sie auf Zulassen, um Koordinateninformationen zu erhalten. 2. Behandlung von Ausnahmen Jetzt stellen wir die Ausnahmebehandlung von getCurrentPosition vor, die mithilfe der Callback-Funktion errorCallback implementiert wird. Der von der Funktion zurückgegebene Parameterfehler enthält zwei Attribute: Code: Fehlertypcode; Meldung: Fehlermeldung. Der Code enthält drei Werte: 1: Der Benutzer ist nicht berechtigt, die Geolokalisierung zu verwenden. 2: Koordinateninformationen können nicht abgerufen werden. 3: Zeitüberschreitung beim Abrufen von Informationen. Sehen wir uns unten ein Beispiel an: Kopieren Sie den Code Der Code lautet wie folgt: <div class="msgborder" id="phpcode123"> <!DOCTYPE HTML> <html> <head> <title>Beispiel</title> <style> table{border-collapse: Collapse;} th, td{padding: 4px;} th{text-align: right;} </style> </head> <body> <table border="1"> <tr> <th>Längengrad:</th> <td id="longitude">-</td> <th>Breitengrad:</th> <td id="latitude">-</td> </tr> <tr> <th>Höhe:</th> <td id="altitude">-</td> <th>Genauigkeit:</th> <td id="accuracy">-</td> </tr> <tr> <th>Höhengenauigkeit:</th> <td id="altitudeAccuracy">-</td> <th>Überschrift:</th> <td id="heading">-</td> </tr> <tr> <th>Geschwindigkeit:</th> <td id="speed">-</td> <th>Zeitstempel:</th> <td id="timestamp">-</td> </tr> <tr> <th>Fehlercode:</th> <td id="errcode">-</td> <th>Fehlermeldung:</th> <td id="errmessage">-</td> </tr> </table> <script> navigator.geolocation.getCurrentPosition(displayPosition, handleError); 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; } </script>

拒绝授权，运行结果：

3.使用geolocation可选参数项
getCurrentPosition(callback,errorCallback,options)中的options有如下参数可以使用，enableHighAccuracy:使用最好的效果；timeout：超时时间（毫秒） maximales Alter:指定缓存时间（毫秒）。我们来下下面的例子：

复制代码

代码如下:

Beispiel