Guide html5-4. Utiliser la géolocalisation pour implémenter les compétences du didacticiel de fonction de positionnement

Guide html5-4. Utiliser la géolocalisation pour implémenter les compétences du didacticiel de fonction de positionnement_html5.

WBOY

Libérer： 2016-05-16 15:50:18

original

1551 Les gens l'ont consulté

Ce que nous allons apprendre aujourd'hui, c'est utiliser la géolocalisation pour mettre en œuvre des fonctions de positionnement. Nous pouvons obtenir l'objet Geolocation via navigator.geolocation, qui fournit les méthodes suivantes :
getCurrentPosition(callback,errorCallback,options) : Obtenez la position actuelle
watchPosition(callback,error,options) : Commencez à surveiller la position actuelle ; position;
clearWatch(id) : Arrêtez de surveiller l'emplacement actuel.
remarque : Le navigateur utilisé dans l'exemple ci-dessous est Chrome. Si vous utilisez d'autres navigateurs, je ne peux pas garantir que les résultats en cours d'exécution seront cohérents avec les résultats affichés dans l'exemple.
1. Obtenez la position actuelle
Nous utiliserons la méthode getCurrentPosition pour obtenir la position actuelle. Les informations de localisation ne seront pas renvoyées directement sous la forme d'un résultat. fonction de rappel pour le traitement. Il y aura quelques retards dans l'obtention des coordonnées et des autorisations d'accès vous seront demandées. Regardons l'exemple suivant :

Copiez le code

Le code est le suivant :

< !DOCTYPE HTML>

Exemple réduire;}
th, td{padding: 4px;}
th{text-align: right;}

Longitude : /td>
Latitude :
- ;
Altitude :
-
Précision : >-

-
Titre :
- 🎜>< /tr>

Vitesse :
Horodatage :
- <script> navigator.geolocation.getCurrentPosition(displayPosition); function displayPosition(pos) { var propriétés = ['longitude', 'latitude', 'altitude', 'précision', 'altitudePrécision ', 'titre', 'vitesse']; pour (var i = 0, len = propriétés.longueur; i < len; i ) { var value = pos.coords[properties[i]] ; document.getElementById(properties[i]).innerHTML = value; document.getElementById('timestamp').innerHTML = pos.timestamp; } </ script> </body> </html> L'objet de position renvoyé contient deux attributs, coords : renvoie les informations de coordonnées ; a été obtenu. Parmi eux, les coordonnées comprennent les attributs suivants : latitude : latitude ; longitude : longitude ; altitude : hauteur ; précision : précision de l'altitude (mètres) cap : direction de déplacement ; deuxième) . Toutes les informations ne seront pas renvoyées, selon l'appareil sur lequel vous hébergez votre navigateur. Les appareils mobiles équipés d’un GPS, d’un accéléromètre et d’une boussole renverront la plupart des informations, mais pas les ordinateurs personnels. Les informations de localisation obtenues par l'ordinateur domestique dépendent de l'environnement réseau ou du wifi. Regardons les résultats de l'exemple ci-dessus. Cliquez sur Autoriser pour obtenir des informations sur les coordonnées. 2. Gestion des exceptions Nous introduisons maintenant la gestion des exceptions de getCurrentPosition, qui est implémentée à l'aide de la fonction de rappel errorCallback. Le paramètre error renvoyé par la fonction contient deux attributs, code : code de type d'erreur message : message d'erreur. Le code contient trois valeurs : 1 : L'utilisateur n'est pas autorisé à utiliser la géolocalisation ; 2 : Impossible d'obtenir les informations de coordonnées ; 3 : Délai d'attente pour l'obtention des informations ; Regardons un exemple ci-dessous : </div> <img alt="" src="http://files.jb51.net/file_images/article/201301/201301071613068.png">Copiez le code Le code est le suivant : <div class="msgborder" id="phpcode123"> <!DOCTYPE HTML> <html> <tête> <titre>Exemple</titre> <style> table{border-collapse: collapse;} th, td{padding: 4px;} th{text-align: right;} </style> </tête> <corps> <table border="1"> <tr> <th>Longitude :</th> <td id="longitude">-</td> <th>Latitude :</th> <td id="latitude">-</td> </tr> <tr> <th>Altitude :</th> <td id="altitude">-</td> <th>Précision :</th> <td id="précision">-</td> </tr> <tr> <th> Précision de l'altitude :</th> <td id="altitudeAccuracy">-</td> <th>Titre :</th> <td id="heading">-</td> </tr> <tr> <th>Vitesse :</th> <td id="speed">-</td> <th>Horodatage :</th> <td id="timestamp">-</td> </tr> <tr> <th>Code d'erreur :</th> <td id="errcode">-</td> <th>Message d'erreur :</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>

拒绝授权，运行结果：