communauté
Apprendre
Bibliothèque d'outils
Outils d'IA
Loisirs
recherche
Français
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.

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
May 16, 2016 pm 03:50 PM
定位

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 src="/static/imghw/default1.png" data-src="http://files.jb51.net/file_images/article/201301/201301071613068.png" class="lazy" alt="">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 de ce site Web
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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Assassin's Creed Shadows: Solution d'énigmes de coquille
2 Il y a quelques semaines By DDD
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Commandes de chat et comment les utiliser
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Afficher plus

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?
7527
15
Tutoriel CakePHP
1378
52
Quel est le format du nom de compte de Steam
81
11
Clé d&amp;amp;amp;amp;amp;amp;amp;#39;activation Win11 permanent
54
19
NYT Connexions Indices et réponses
21
74
Afficher plus
Related knowledge
Comment localiser les écouteurs sans fil Apple s'ils sont perdus_Comment localiser les écouteurs sans fil Apple Comment localiser les écouteurs sans fil Apple s'ils sont perdus_Comment localiser les écouteurs sans fil Apple Mar 23, 2024 am 08:21 AM

1. Tout d'abord, nous ouvrons l'application [Recherche] sur le téléphone mobile et sélectionnons l'appareil dans la liste sur l'interface de l'appareil. 2. Ensuite, vous pouvez vérifier l'emplacement et cliquer sur l'itinéraire pour y naviguer.

Comment utiliser les fonctions de carte et de localisation dans Uniapp Comment utiliser les fonctions de carte et de localisation dans Uniapp Oct 16, 2023 am 08:01 AM

Comment utiliser les fonctions de carte et de positionnement dans uniapp 1. Introduction générale Avec la popularité des applications mobiles et le développement rapide de la technologie de positionnement, les fonctions de carte et de positionnement sont devenues un élément indispensable des applications mobiles modernes. uniapp est un framework de développement d'applications multiplateforme développé sur la base de Vue.js, qui peut permettre aux développeurs de partager du code sur plusieurs plateformes. Cet article expliquera comment utiliser les cartes et les fonctions de positionnement dans uniapp et fournira des exemples de code spécifiques. 2. Utilisez le composant uniapp-amap pour implémenter la fonction map

Comment utiliser un plugin WordPress pour implémenter la fonctionnalité de localisation instantanée Comment utiliser un plugin WordPress pour implémenter la fonctionnalité de localisation instantanée Sep 05, 2023 pm 04:51 PM

Comment utiliser les plugins WordPress pour implémenter la fonction de localisation instantanée Avec la popularité des appareils mobiles, de plus en plus de sites Web commencent à fournir des services basés sur la géolocalisation. Dans les sites WordPress, nous pouvons utiliser des plug-ins pour mettre en œuvre des fonctions de positionnement instantané et fournir aux visiteurs des services liés à leur situation géographique. 1. Choisissez le bon plug-in Il existe de nombreux plug-ins proposant des services de géolocalisation dans la bibliothèque de plug-ins WordPress. En fonction des besoins et des exigences, choisir le bon plug-in est la clé pour obtenir une fonctionnalité de positionnement instantané. En voici quelques-uns

Comment localiser l'emplacement du téléphone portable de l'autre partie sur Amap - Comment localiser l'emplacement du téléphone portable de l'autre partie sur Amap Comment localiser l'emplacement du téléphone portable de l'autre partie sur Amap - Comment localiser l'emplacement du téléphone portable de l'autre partie sur Amap Apr 01, 2024 pm 02:11 PM

1. Cliquez pour accéder au logiciel de cartographie Amap sur votre téléphone mobile. 2. Cliquez sur Mon dans le coin inférieur droit. 3. Cliquez pour accéder à la carte familiale. 4. Cliquez sur Créer ma carte familiale. 5. Une fois la création réussie, un code d'invitation apparaîtra et pourra être partagé avec un autre téléphone mobile.

Méthodes pour résoudre le problème de l'emplacement des fuites de mémoire dans le développement du langage Go Méthodes pour résoudre le problème de l'emplacement des fuites de mémoire dans le développement du langage Go Jul 01, 2023 pm 12:33 PM

Méthodes pour résoudre le problème de l'emplacement des fuites de mémoire dans le développement du langage Go : Les fuites de mémoire sont l'un des problèmes courants dans le développement de programmes. Dans le développement du langage Go, en raison de l'existence de son mécanisme automatique de récupération de place, les problèmes de fuite de mémoire peuvent être moindres que dans d'autres langages. Cependant, lorsque nous sommes confrontés à des applications volumineuses et complexes, des fuites de mémoire peuvent toujours se produire. Cet article présentera quelques méthodes courantes pour localiser et résoudre les problèmes de fuite de mémoire dans le développement du langage Go. Tout d’abord, nous devons comprendre ce qu’est une fuite de mémoire. En termes simples, une fuite de mémoire fait référence au

Comment changer les informations de localisation et comment modifier l'adresse Comment changer les informations de localisation et comment modifier l'adresse Mar 12, 2024 pm 09:52 PM

Nous savons tous très clairement que Taku APP est une plateforme de chat et sociale très fiable. Elle permet désormais à tout le monde de se faire des amis en ligne. Certaines des formes de se faire des amis ici permettent principalement aux gens de se faire des amis par emplacement. Après tout, il peut localiser automatiquement vos informations de localisation actuelles et mieux vous mettre en contact avec des amis proches les uns des autres dans la même ville, afin que tout le monde puisse discuter plus facilement et se sentir spécial, plusieurs fois. Afin de faire connaissance avec plus d'amis ailleurs, chacun a l'idée de modifier son adresse, mais il ne sait pas comment modifier ses informations de localisation, ce qui est très difficile, donc l'éditeur de ce site. a également collecté des informations spécifiques

Comment retrouver rapidement l'emplacement d'un téléphone Huawei après sa perte ? Comment retrouver rapidement l'emplacement d'un téléphone Huawei après sa perte ? Mar 24, 2024 am 08:48 AM

Dans la société actuelle, les téléphones portables sont devenus un élément indispensable de nos vies. En tant que marque de smartphones bien connue, les téléphones mobiles Huawei sont profondément appréciés des utilisateurs. Cependant, avec la popularité des téléphones mobiles et l’augmentation de la fréquence d’utilisation, les téléphones portables sont souvent perdus. Une fois notre téléphone perdu, nous avons tendance à nous sentir anxieux et confus. Alors, si malheureusement vous perdez votre téléphone Huawei, comment retrouver rapidement son emplacement ? Étape 1 : Utilisez la fonction de positionnement du téléphone mobile. Les téléphones mobiles Huawei disposent de puissantes fonctions de positionnement intégrées. Les utilisateurs peuvent utiliser l'option « Sécurité » dans les paramètres du téléphone mobile.

Introduction à la suppression d'une page de contenu dans Word Introduction à la suppression d'une page de contenu dans Word Mar 26, 2024 am 10:06 AM

Titre : Introduction à la suppression d'une page de contenu dans Word Lors de la modification d'un document à l'aide de Microsoft Word, vous pouvez parfois rencontrer une situation dans laquelle vous devez supprimer le contenu d'une certaine page. Vous souhaiterez peut-être supprimer une page vierge ou un contenu inutile. sur une certaine page du document. En réponse à cette situation, nous pouvons adopter certaines méthodes pour supprimer rapidement et efficacement une page de contenu. Ensuite, quelques méthodes pour supprimer une page de contenu dans Microsoft Word seront présentées. Méthode 1 : Supprimer le contenu d'une page Tout d'abord, ouvrez le document Word qui doit être modifié. Certainement

See all articles