La géolocalisation est une API Web sous la norme HTML5. Vous pouvez l'utiliser pour obtenir les informations de localisation actuelle (coordonnées) de l'appareil. Cette API dispose de trois méthodes : getCurrentPosition, watchPosition et clearWatch. les deux méthodes restantes nécessitent d'être utilisées ensemble !
Comment utiliser :Vérification de la compatibilité du navigateur :
L'API est publiée via l'objet navigator.geolocation Ce n'est que lorsque cet objet existe que son service de géolocalisation peut être utilisé. La méthode de détection est la suivante :
if (navigator.geolocation) { // Le code de positionnement est écrit ici} else { alert('La géolocalisation n'est pas prise en charge dans votre navigateur')}Obtenez la position actuelle de l'utilisateur :
Utilisez la méthode getCurrentLocation pour obtenir les informations de localisation de l'utilisateur. Cette méthode comporte trois paramètres :
| Liste des paramètres | taper | illustrer |
| gérerSuccès | Fonction | Appeler la fonction handleSuccess en cas de succès |
| handleErreur | Fonction | Appeler la fonction handleError en cas d'échec |
| choix | Objet | Paramètres d'initialisation |
// Paramètres d'initialisation const options = { // Haute précision : vrai / faux EnableHighAccuracy : vrai, // Temps maximum d'attente pour l'unité de réponse : millisecondes délai d'attente : 5 * 1000, // L'emplacement de cache le plus long que l'application est prête à accepter Temps maximumAge : 0}// Fonction de rappel de réussite : les données contiennent des informations d'emplacement const handleSuccess = data => console.log(data)// Fonction de rappel d'échec : l'erreur contient des informations d'erreur const handleError = error => console.log(error)if (navigator.geolocation) { // Le code de positionnement est écrit ici navigator.geolocation.getCurrentPosition(handleSuccess, handleError, options)} else { alert('La géolocalisation n'est pas prise en charge dans votre navigateur') }Voici le code avec plus de détails :
const handleSuccess = data => { const { coords, // Horodatage des informations de localisation // Horodatage lorsque les informations de localisation sont obtenues avec succès} = data const { précision, // Précision du résultat renvoyé (mètres) altitude, // Par rapport à l'horizontale plane Altitude altitudeAccuracy, // Renvoie la précision de l'altitude (en mètres) du cap, // La direction de déplacement de l'appareil hôte, dans le sens des aiguilles d'une montre à partir de la latitude nord, // Latitude longitude, // Vitesse de longitude // La vitesse de déplacement de l'appareil} = coordonnées // Imprimez-le et consultez console.log('timestamp =', timestamp) console.log('accuracy =', précision) console.log('altitude =', altitude) console .log( 'altitudeAccuracy =', altitudeAccuracy) console.log('heading =', cap) console.log('latitude =', latitude) console.log('longitude =', longitude) console.log('speed =', speed)}const handleError = error => { switch (error.code) { cas 1 : console.log('Demande de service de localisation rejetée') break cas 2 : console.log(' Le les informations de localisation ne peuvent pas être obtenues temporairement') cas d'arrêt 3 : console.log('Délai d'attente pour obtenir les informations') cas d'arrêt 4 : console.log('Erreur inconnue') break }}const opt = { // Haute précision : vrai / faux activerHighAccuracy : vrai, // Temps maximum d'attente pour une réponse Unité : millisecondes délai d'attente : 5 * 1000, // L'âge maximum de l'emplacement de cache que l'application est prête à accepter maximumAge : 0} if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(handleSuccess , handleError, opt) } else { alert('La géolocalisation n'est pas prise en charge dans votre navigateur')}Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.