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:
< !DOCTYPE HTML> Collapse;}
th, td{padding: 4px;}
th{text-align: right;}
< ;table border="1">
| Längengrad: | /td>
Latitude: | - ;
Höhe: | >- | - | 🎜>< /tr>
|---|
<script> <br>navigator.geolocation.getCurrentPosition(displayPosition); <br>function displayPosition(pos) { <br>var Properties = ['longitude', 'latitude', 'altitude', 'accuracy', 'altitudeAccuracy ', 'heading', 'speed']; <br>for (var i = 0, len = Properties.length; i < len; i ) { <br />var value = pos.coords[properties[i]] ; <br /> document.getElementById(properties[i]).innerHTML = value; <br />document.getElementById('timestamp').innerHTML = pos.timestamp; script><br></body> erhalten wurde. Zu den Koordinaten gehören die folgenden Attribute: Breitengrad: Längengrad; Höhe: Genauigkeit (Meter); zweite) . <br>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. <br>
<br><br><br>
<br>Klicken Sie auf Zulassen, um Koordinateninformationen zu erhalten. <br>
<br><br><br>
<br>2. Behandlung von Ausnahmen <br> <br>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. <br>Sehen wir uns unten ein Beispiel an: <br><br><br><br><br><br>Kopieren Sie den Code<br><br><br>Der Code lautet wie folgt:<br><div class="msgborder" id="phpcode123"> <br><!DOCTYPE HTML> <br><html> <br><head> <br><title>Beispiel</title> <br><style> <br>table{border-collapse: Collapse;} <br>th, td{padding: 4px;} <br>th{text-align: right;} <br></style> <br></head> <br><body> <br><table border="1"> <br><tr> <br><th>Längengrad:</th> <br><td id="longitude">-</td> <br><th>Breitengrad:</th> <br><td id="latitude">-</td> <br></tr> <br><tr> <br><th>Höhe:</th> <br><td id="altitude">-</td> <br><th>Genauigkeit:</th> <br><td id="accuracy">-</td> <br></tr> <br><tr> <br><th>Höhengenauigkeit:</th> <br><td id="altitudeAccuracy">-</td> <br><th>Überschrift:</th> <br><td id="heading">-</td> <br></tr> <br><tr> <br><th>Geschwindigkeit:</th> <br><td id="speed">-</td> <br><th>Zeitstempel:</th> <br><td id="timestamp">-</td> <br></tr> <br><tr> <br><th>Fehlercode:</th> <br><td id="errcode">-</td> <br><th>Fehlermeldung:</th> <br><td id="errmessage">-</td> <br></tr> <br></table> <br><script> <br>navigator.geolocation.getCurrentPosition(displayPosition, handleError); <br>function displayPosition(pos) { <br>var Properties = ["longitude", "latitude", "altitude", "accuracy", "altitudeAccuracy", "heading", "speed"]; <br>for (var i = 0; i < Properties.length; i ) { <br />var value = pos.coords[properties[i]]; <br />document.getElementById(properties[i]).innerHTML = value; <br />} <br />document.getElementById("timestamp").innerHTML = pos.timestamp; <br />} <br />function handleError(err) { <br />document.getElementById("errcode").innerHTML = err.code; <br />document.getElementById("errmessage").innerHTML = err.message; <br />} <br /></script>
