recherche

Maison >interface Web >Tutoriel H5 >Guide html5-4. Utiliser la géolocalisation pour implémenter les compétences du didacticiel de fonction de positionnement_html5.

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

WBOY
WBOYoriginal
2016-05-16 15:50:181553parcourir

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> <br>navigator.geolocation.getCurrentPosition(displayPosition); <br>function displayPosition(pos) { <br>var propriétés = ['longitude', 'latitude', 'altitude', 'précision', 'altitudePrécision ', 'titre', 'vitesse']; <br>pour (var i = 0, len = propriétés.longueur; i < len; i ) { <br />var value = pos.coords[properties[i]] ; <br /> document.getElementById(properties[i]).innerHTML = value; <br />document.getElementById('timestamp').innerHTML = pos.timestamp; <br />} <br /></ script> <br></body> <br></html> <br><br><br>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) . <br>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. <br> <br><br><br> <br>Cliquez sur Autoriser pour obtenir des informations sur les coordonnées. <br> <br><br><br> <br>2. Gestion des exceptions <br> <br>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 ; <br>Regardons un exemple ci-dessous : </div> <br><br><br><p><img alt="" src="http://files.jb51.net/file_images/article/201301/201301071613068.png">Copiez le code</p> <br><br>Le code est le suivant :<p></p> <div class="msgborder" id="phpcode123"> <br><!DOCTYPE HTML> <br><html> <br><tête> <br><titre>Exemple</titre> <br><style> <br>table{border-collapse: collapse;} <br>th, td{padding: 4px;} <br>th{text-align: right;} <br></style> <br></tête> <br><corps> <br><table border="1"> <br><tr> <br><th>Longitude :</th> <br><td id="longitude">-</td> <br><th>Latitude :</th> <br><td id="latitude">-</td> <br></tr> <br><tr> <br><th>Altitude :</th> <br><td id="altitude">-</td> <br><th>Précision :</th> <br><td id="précision">-</td> <br></tr> <br><tr> <br><th> Précision de l'altitude :</th> <br><td id="altitudeAccuracy">-</td> <br><th>Titre :</th> <br><td id="heading">-</td> <br></tr> <br><tr> <br><th>Vitesse :</th> <br><td id="speed">-</td> <br><th>Horodatage :</th> <br><td id="timestamp">-</td> <br></tr> <br><tr> <br><th>Code d'erreur :</th> <br><td id="errcode">-</td> <br><th>Message d'erreur :</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>



拒绝授权，运行结果：

3.效果；timeout：超时时间（毫秒）； maximumAge：指定缓存时间（毫秒）。我们来下下面的例子：


复制代码代码如下 :




Exemple


































Longitude : - Latitude : -
Altitude : - Précision : -
Précision de l'altitude : - Titre : -
Vitesse : - Horodatage : -
Code d'erreur : - Message d'erreur : -

<script> <br>var options = { <br>enableHighAccuracy : false, <br>timeout : 2000, <br>maximumAge : 30000 <br>} ; <br>navigator.geolocation.getCurrentPosition(displayPosition, handleError, options); <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>



4.监视位置变化
下面我们介绍使用watchPosition方法实现位置变化的监视，他的Il s'agit de getCurrentPosition. >

复制代码代码如下 :




Exemple


































Longitude : - Latitude : -
Altitude : - Précision : -
Précision de l'altitude : - Titre : -
Vitesse : - Horodatage : -
Code d'erreur : - Message d'erreur : -


<script> <br>var options = { <br>enableHighAccuracy : false, <br>timeout : 2000, <br>maximumAge : 30000 <br>} ; <br>var watchID = navigator.geolocation.watchPosition(displayPosition, handleError, options); <br>document.getElementById("pressme").onclick = function (e) { <br>navigator.geolocation.clearWatch(watchID); <br>} ; <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>



当点击Annuler la montre按钮时，停止监视。
démo下载地址：Html5Guide.Geolocation.zip
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Tutoriel de dessin sur toile html5 (3) : La raison pour laquelle les lignes de 1 pixel sont floues sur les compétences du didacticiel canvas_html5Article suivant：Tutoriel de dessin sur toile html5 (3) : La raison pour laquelle les lignes de 1 pixel sont floues sur les compétences du didacticiel canvas_html5

Articles Liés

Voir plus