introduction

Depuis de nombreuses années, les cartes en papier sont devenues des antiquités. Ils ont été remplacés par des appareils de navigation GPS et des applications mobiles dédiés, devenus omniprésents. Vous les trouvez dans les voitures et, plus important encore, sur les tablettes et les smartphones.

L'une des principales caractéristiques d'un appareil de navigation consiste à détecter la position actuelle de l'appareil et à la mettre à jour au fur et à mesure de ses modifications. Cela nous aide à aller d'un endroit à un autre en nous donnant des indications..

Aujourd'hui, nous avons la chance d'avoir la géolocalisation prise en charge de manière native par les navigateurs. Dans cet article, nous allons parler de l'API de géolocalisation, qui permet aux applications de détecter et de suivre l'emplacement du périphérique..

La possibilité de détecter l'emplacement de l'appareil a de nombreuses applications. Par exemple, sur le Web, Google, Microsoft et Yahoo utilisent l'emplacement de l'utilisateur pour personnaliser les SERPs (page de résultats du moteur de recherche) en fonction de l'emplacement de l'utilisateur. La localisation est un autre excellent choix pour la géolocalisation.

1. Qu'est-ce que c'est?

L'API de géolocalisation définit une interface de haut niveau avec des informations de localisation, telles que la latitude et la longitude, liées au périphérique hébergeant la mise en œuvre. L'API elle-même est agnostique des sources d'informations de localisation sous-jacentes.

Les sources courantes d'informations de localisation incluent le GPS et les informations de localisation déduites des signaux réseau tels que l'adresse IP du périphérique, RFID, Wi-Fi, Bluetooth, adresses MAC, identifiants de cellules GSM / CDMA et entrées utilisateur. Aucune garantie n'est donnée que l'API retourne l'emplacement réel du périphérique.

L'API de géolocalisation est une recommandation du W3C, ce qui signifie que la spécification est stable. Nous pouvons supposer que cela ne changera pas à l'avenir à moins qu'une nouvelle version ne soit en cours d'élaboration. Il est à noter que l'API de géolocalisation ne fait pas officiellement partie de la spécification HTML5, car elle a été développée séparément..

Maintenant que nous savons ce qu'est l'API de géolocalisation et ce qu'elle peut faire, il est temps de voir quelles méthodes elle expose aux développeurs..

2. mise en œuvre

Précision

L'API utilise plusieurs sources pour détecter la position du périphérique. Par exemple, sur un ordinateur portable ou un ordinateur de bureau sans puce GPS, il est probable que la position est déduite de l'adresse IP du périphérique, ce qui signifie que l'emplacement renvoyé par l'API n'est pas très précis..

Toutefois, sur un périphérique mobile, l'API peut utiliser des informations provenant de sources multiples et plus précises, telles que la puce GPS du périphérique, la connexion réseau (Wi-Fi, 3G, HSPA +) et la cellule GSM / CDMA. Vous pouvez vous attendre à des informations de localisation plus précises sur un appareil mobile, en particulier si le GPS est activé..

Intimité

La spécification de l'API de géolocalisation traite également de la confidentialité et des autorisations. En fait, la spécification indique clairement que l'autorisation de l'utilisateur doit être explicitement obtenue avant d'activer l'API..

Cela signifie que le navigateur doit afficher une notification à l'utilisateur lui demandant sa permission. Un exemple du message affiché à l'utilisateur est présenté ci-dessous (Google Maps)..

API

L'API expose trois méthodes appartenant à la window.navigator.geolocation objet. Les méthodes fournies sont:

• getCurrentPosition
• watchPosition
• clearWatch

Détecter le support

Comme beaucoup d'autres API, il est très facile de détecter si le navigateur du périphérique prend en charge l'API de géolocalisation. Jetez un coup d'œil à l'extrait suivant dans lequel nous détectons le support de l'API de géolocalisation.

if (window.navigator && window.navigator.geolocation) // Je peux vous regarder où que vous alliez… else // Non pris en charge

Localisation de l'appareil

Pour détecter l'emplacement de l'appareil, nous appelons getCurrentPosition ou watchPosition, en fonction de vos besoins. Les deux méthodes exécutent la même tâche avec seulement quelques différences mineures.

Pour obtenir l'emplacement de l'appareil, getCurrentPosition et watchPosition faire une demande asynchrone. La différence entre ces méthodes est que getCurrentPosition effectue une requête unique, alors que watchPosition surveille l'emplacement de l'appareil pour les modifications et informe l'application lorsqu'un changement d'emplacement a lieu.

L’API de géolocalisation est suffisamment intelligente pour n’appeler que le rappel de succès de watchPosition-invoqué lorsque la position est obtenue, si l'emplacement de l'utilisateur change.

Une autre différence importante entre getCurrentPosition et watchPosition est la valeur de retour de chaque méthode. le getCurrentPosition méthode ne renvoie rien, alors que watchPosition renvoie un identifiant qui peut être utilisé pour empêcher l'API de surveiller l'emplacement du périphérique via le clearWatch une fonction.

Les signatures de getCurrentPosition et watchPosition ressemble à ca:

// Obtenir la position actuelle getCurrentPosition (successCallback [, errorCallback [, options]])] // Suivre la position watchPosition (successCallback [, errorCallback [, options]])

Comme l'indiquent les signatures, chaque fonction accepte trois paramètres. Seul le premier argument, la fonction de rappel de réussite, est requis. Regardons de plus près chaque argument.

1. succèsCallback: Cette fonction de rappel est exécutée après avoir obtenu avec succès la localisation de l'utilisateur. Le rappel accepte un position objet contenant les informations de localisation de l'appareil.
2. errorCallback: Le rappel d'erreur est exécuté lorsqu'une erreur est rencontrée. Le rappel d'erreur accepte un Erreur objet contenant des informations sur le type d'erreur survenu.
3. options: Le options objet donne au développeur la possibilité de configurer la requête asynchrone.

Jetez un coup d’œil aux extraits suivants pour voir comment vous pouvez utiliser getCurrentPosition et watchPosition pour obtenir l'emplacement de l'appareil.

var géolocalisation = null; if (window.navigator && window.navigator.geolocation) geolocation = window.navigator.geolocation;  if (géolocalisation) géolocalisation.getCurrentPosition (fonction (position) console.log (position);); var identifiant = geolocation.watchPosition (fonction (position) console.log (position);); console.log (identifiant); 

Arrêter la surveillance

Dans la section précédente, j'ai mentionné le clearWatch une fonction. Cette fonction vous permet d’arrêter de surveiller la localisation de l’appareil, initiée en appelant watchPosition.

le clearWatch fonction accepte un argument requis, l'identifiant nous est renvoyé après l'appel watchPosition.

Maintenant que nous avons couvert les détails techniques de l’API de géolocalisation, il est temps d’explorer les position, Erreur, et options objets renvoyés par l'API de géolocalisation.

Information de Lieu

Position

Les méthodes exposées par l'API de géolocalisation acceptent ou renvoient trois types d'objets. Le premier objet qui nous intéresse est le position objet, qui contient les informations de localisation qui nous intéressent. Consultez le tableau suivant pour avoir une idée des informations qu'il contient..

L'objet de position renvoyé par les rappels de succès de getCurrentPosition et watchPosition contient un horodatage et coords propriété. le coords propriété est un objet contenant l'emplacement de latitude, longitude, altitude, précision, altitudeAccuracy, titre, et la vitesse.

La plupart des navigateurs de bureau ne renverront pas de valeur pour le altitude, altitudeAccuracy, titre, et la vitesse Propriétés. Les appareils mobiles, tels que les smartphones et les tablettes, fourniront des informations plus précises grâce à la présence d'une puce GPS ou d'un autre matériel permettant de détecter l'emplacement de l'appareil..

le horodatage propriété contient l'heure à laquelle l'emplacement a été détecté, ce qui peut être utile si vous avez besoin de savoir si les données renvoyées sont fraîches.

PositionError

le Erreur objet du rappel d'erreur, le deuxième argument optionnel de getCurrentPosition et watchPosition, a un code et un message propriété.

le message La propriété décrit brièvement le type d'erreur. le code propriété peut avoir l'une des quatre valeurs suivantes:

• 0: La demande a échoué, mais la raison n'est pas connue.
• 1: La requête a échoué car l'utilisateur n'a pas donné l'autorisation d'utiliser l'emplacement du périphérique.
• 2: La requête a échoué à la suite d'une erreur réseau.
• 3: La requête a échoué car la résolution de la position du périphérique a pris trop de temps.

PositionOptions

Le troisième argument optionnel de getCurrentPosition et watchPosition est un PositionOptions objet, permettant au développeur de personnaliser la requête asynchrone.

L'objet PositionOptions supporte actuellement trois options:

• enableHighAccuracy: Si la valeur est définie sur vrai, la page Web ou l'application indique qu'elle souhaite obtenir le meilleur résultat possible, le plus précis possible. Cela peut entraîner un temps de réponse plus lent ou une consommation d'énergie accrue. La valeur par défaut est faux.
• temps libreRemarque: Cette propriété spécifie le nombre maximal de millisecondes après lequel la demande doit être considérée comme étant hors délai. La valeur par défaut est Infini.
• maximumAge: Lorsqu'une demande de localisation aboutit, le navigateur met en cache le résultat pour une utilisation ultérieure. le maximumAge La propriété spécifie le délai après lequel le cache doit être invalidé. La valeur par défaut est 0, ce qui signifie que la demande ne doit pas être mis en cache.

Prise en charge du navigateur

Le support de l'API de géolocalisation est vraiment bon. Cela est vrai pour les navigateurs de bureau et mobiles. Consultez ce résumé pour avoir une idée des navigateurs de bureau prenant en charge l’API de géolocalisation:

• Firefox 3.5+
• Chrome 5.0+
• Safari 5.0+
• Opéra 10.60+
• Internet Explorer 9.0+

La prise en charge dans les navigateurs mobiles est encore meilleure, comme vous pouvez le voir dans ce résumé:

• Android 2.0+
• iPhone 3.0+
• Opera Mobile 10.1+
• Symbian (S60 troisième et cinquième génération)
• BlackBerry OS 6

L'API de géolocalisation est largement prise en charge. Vous vous demandez peut-être ce que vous pouvez faire si vous rencontrez un navigateur qui ne prend pas en charge l’API de géolocalisation. Croyez-le ou non, il existe plusieurs polyfills et cales pour remédier à ce problème. Les solutions les plus remarquables sont celle créée par Manuel Bieh et une cale légère créée par Paul Irish..

Démo

Maintenant que nous connaissons les tenants et les aboutissants de l'API de géolocalisation, il est temps de la voir en action. Cette démonstration est entièrement fonctionnelle et utilise toutes les méthodes et tous les objets décrits dans cet article. Le but est simple: chaque fois qu'une demande de détection de la position du périphérique est effectuée, les données de localisation sont présentées à l'utilisateur sous forme de liste..

La démo contient trois boutons vous permettant de sélectionner l’opération que vous souhaitez effectuer. La démo détecte également si le navigateur prend en charge l’API de géolocalisation ou non. Si ce n'est pas le cas, vous verrez le message "API non prise en charge" et les boutons sont désactivés.

Le code source de la démo est présenté ci-dessous, mais vous pouvez également jouer avec une démonstration en direct de l'API de géolocalisation..

          
API de géolocalisation
 
 Obtenir la position actuelle Regarder la position Arrêtez de regarder la position 
 API non prise en charge 
Information
 
 
 
 Votre position est indisponiblelatitude, indisponible° longitude (avec une précision de indisponible mètres) 
 
 Ton altitude est indisponible mètres (avec une précision de indisponible mètres) 
 
Vous êtes indisponible° du nord géographique
 
Vous vous déplacez à une vitesse de indisponible° mètres / seconde
 
Données mises à jour à indisponible
 
 
 
Bûche
 
 Effacer le journal  Démo créée par Aurelio De Rosa (@AurelioDeRosa)     

Conclusion

Dans cet article, nous avons découvert l'API de géolocalisation. Nous avons vu ce que c'est, comment l'utiliser et quand l'utiliser.

L'API de géolocalisation est un outil utile pour améliorer l'expérience utilisateur et peut servir à plusieurs fins. La prise en charge est large, mais n'oubliez pas que les anciennes versions d'Internet Explorer ne la prennent pas en charge..

Comme nous l’avons vu dans cet article, vous devez savoir que certaines données de localisation, telles que la vitesse, altitude, et titre, ne sont pas toujours disponibles. Pensez également à utiliser l’API de géolocalisation avec précaution car elle nécessite une charge de batterie importante, en particulier sur les appareils mobiles équipés d’une puce GPS..