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

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 :




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



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

-
Titre :
- 🎜>

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 /> <br /> <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 : <br /><br /><br /><p><img src="/static/imghwm/default1.png" data-src="http://files.jb51.net/file_images/article/201301/201301071613068.png?x-oss-process=image/resize,p_40" class="lazy" alt="" />Copiez le code<br /><br />Le code est le suivant :<p><div class="msgborder" id="phpcode123"> <br /><!DOCTYPE HTML> <br /><html> <br /><tête> <br /><titre>Exemple <br /><style> <br />table{border-collapse: collapse;} <br />th, td{padding: 4px;} <br />th{text-align: right;} <br /> <br />ête> <br /><corps> <br /><table border="1"> <br /><tr> <br /><th>Longitude : <br /><td id="longitude">- <br /><th>Latitude : <br /><td id="latitude">- <br /></script>

Altitude :
-
Précision :
-


Précision de l'altitude :
-
Titre :
-


Vitesse :
-
Horodatage :
-


Code d'erreur :
-
Message d'erreur :
-


<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>

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
H5 et HTML5: termes couramment utilisés dans le développement WebH5 et HTML5: termes couramment utilisés dans le développement WebApr 13, 2025 am 12:01 AM

H5 et HTML5 se réfèrent à la même chose, à savoir HTML5. HTML5 est la cinquième version de HTML, apportant de nouvelles fonctionnalités telles que les balises sémantiques, la prise en charge multimédia, la toile et les graphiques, le stockage hors ligne et le stockage local, l'amélioration de l'expressivité et de l'interactivité des pages Web.

À quoi se réfère H5? Explorer le contexteÀ quoi se réfère H5? Explorer le contexteApr 12, 2025 am 12:03 AM

H5Referstohtml5, apivotaltechnologyInwebdevelopment.1) html5introducesnewelementsandapisforrich, dynamicwebapplications.2) itsupp OrtsMultimeDiaHithoutPlugins, améliorant la réception detièmeaCrOsDevices.3) SemantelelementsImproveContentsTructureAndSeo.4) H5'sRespo

H5: outils, cadres et meilleures pratiquesH5: outils, cadres et meilleures pratiquesApr 11, 2025 am 12:11 AM

Les outils et les frameworks qui doivent être maîtrisés dans le développement H5 incluent Vue.js, React et WebPack. 1.Vue.js convient à la construction d'interfaces utilisateur et prend en charge le développement des composants. 2. React optimise le rendu de la page via Virtual DOM, adapté aux applications complexes. 3.WebPack est utilisé pour l'emballage des modules et optimiser le chargement des ressources.

L'héritage de HTML5: Comprendre H5 dans le présentL'héritage de HTML5: Comprendre H5 dans le présentApr 10, 2025 am 09:28 AM

Html5hassignifytransformedwebdevelopmentByIntroduCingSémanticElements, améliorant laMultimeSupport, et improvingperformance.1) itmadewebsitesMoreAccessSiblendSeo-friendlywithsemiticslike, et.2)

Code H5: accessibilité et HTML sémantiqueCode H5: accessibilité et HTML sémantiqueApr 09, 2025 am 12:05 AM

H5 améliore l'accessibilité des pages Web et les effets SEO via des éléments sémantiques et des attributs ARIA. 1. Utiliser, etc. pour organiser la structure du contenu et améliorer le référencement. 2. Les attributs ARIA tels que Aria-Babel améliorent l'accessibilité, et les utilisateurs de technologies d'assistance peuvent utiliser en douceur les pages Web.

H5 est-il le même que HTML5?H5 est-il le même que HTML5?Apr 08, 2025 am 12:16 AM

"H5" et "HTML5" sont les mêmes dans la plupart des cas, mais ils peuvent avoir des significations différentes dans certains scénarios spécifiques. 1. "Html5" est une norme définie par W3C qui contient de nouvelles balises et API. 2. "H5" est généralement l'abréviation de HTML5, mais dans le développement mobile, il peut se référer à un cadre basé sur HTML5. Comprendre ces différences aide à utiliser ces termes avec précision dans votre projet.

Quelle est la fonction de H5?Quelle est la fonction de H5?Apr 07, 2025 am 12:10 AM

H5, ou HTML5, est la cinquième version de HTML. Il fournit aux développeurs un ensemble d'outils plus fort, ce qui facilite la création d'applications Web complexes. Les fonctions principales de H5 incluent: 1) des éléments qui permettent de dessiner des graphiques et des animations sur les pages Web; 2) Tags sémantiques tels que, etc. pour rendre la structure de la page Web claire et propice à l'optimisation du référencement; 3) de nouvelles API telles que GeolocationAPI prennent en charge les services basés sur la localisation; 4) La compatibilité entre les navigateurs doit être assurée par le biais de tests de compatibilité et de bibliothèque polyfillaire.

Comment faire le lien H5Comment faire le lien H5Apr 06, 2025 pm 12:39 PM

Comment créer un lien H5? Déterminez la cible de liaison: Obtenez l'URL de la page ou de l'application H5. Créer des ancres HTML: utilisez le & lt; a & gt; Tag pour créer une ancre et spécifiez l'URL cible de liaison. Définir les propriétés du lien (facultatif): définir les propriétés cibles, titres et onclick selon les besoins. Ajouter à la page Web: ajoutez du code d'ancrage HTML à la page Web où vous souhaitez que le lien apparaisse.

See all articles

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.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
4 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Adaptateur de serveur SAP NetWeaver pour Eclipse

Adaptateur de serveur SAP NetWeaver pour Eclipse

Intégrez Eclipse au serveur d'applications SAP NetWeaver.

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Listes Sec

Listes Sec

SecLists est le compagnon ultime du testeur de sécurité. Il s'agit d'une collection de différents types de listes fréquemment utilisées lors des évaluations de sécurité, le tout en un seul endroit. SecLists contribue à rendre les tests de sécurité plus efficaces et productifs en fournissant facilement toutes les listes dont un testeur de sécurité pourrait avoir besoin. Les types de listes incluent les noms d'utilisateur, les mots de passe, les URL, les charges utiles floues, les modèles de données sensibles, les shells Web, etc. Le testeur peut simplement extraire ce référentiel sur une nouvelle machine de test et il aura accès à tous les types de listes dont il a besoin.

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

MantisBT

MantisBT

Mantis est un outil Web de suivi des défauts facile à déployer, conçu pour faciliter le suivi des défauts des produits. Cela nécessite PHP, MySQL et un serveur Web. Découvrez nos services de démonstration et d'hébergement.