Maison > Article > interface Web > 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.
- WBOYoriginal
- 2016-05-16 15:50:181463parcourir
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>
th, td{padding: 4px;}
th{text-align: right;}
拒绝授权，运行结果：
复制代码代码如下 :
Exemple
<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
<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
| 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. >
复制代码代码如下 :
| 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