Dans cette leçon, nous allons examiner l'utilisation de l'API de géolocalisation de JavaScript. Et si tu veux penser à l'impact de ça, toute application utilisant votre emplacement, mobile, ordinateur de bureau ou quoi que ce soit d'autre, utilise cette API, sous une forme ou une autre. Je vais donc vous montrer comment nous pouvons obtenir notre emplacement, et ensuite nous utiliserons Google Maps afin que nous puissions montrer ce que nous pouvons réellement en faire. Et juste pour commencer à trouver notre emplacement, Je vais ajouter du code qui obtiendra ma position quand je clique sur le bouton, et tout commence à l'aide de l'objet navigateur, qui est le navigateur lui-même, et l'objet de géolocalisation qui en fait partie. Tu devrais être assez bien assuré que la plupart des navigateurs modernes prennent en charge l'objet de géolocalisation. Si vous n'êtes pas sûr, vous pouvez utiliser une bibliothèque de détection de fonctionnalités comme Modernizer Ou quelque chose de ce genre. Mais ce que nous voulons faire, c'est obtenir notre position actuelle, et les paramètres que prend cette méthode sont le nom de la fonction que nous allons exécuter s'il réussit, et le nom de la fonction que nous allons exécuter si notre position ne réussit pas. Maintenant, ce que fait l'API de géolocalisation, est-ce qu'il traverse une série de façons dont il a pour trouver votre emplacement. Il peut utiliser votre adresse IP, il pourrait utiliser votre opérateur de téléphonie mobile, il pourrait faire la triangulation de téléphone portable, des choses dans ce sens. La beauté de l'utilisation de ceci est que vous n'avez pas besoin de savoir ou de vous soucier sur la méthode qu'il utilise. Lorsque nous obtenons la position actuelle, nous recherchons un poste permanent. Il existe d'autres méthodes que nous pouvons utiliser pour suivre nos progrès. Alors disons pour une application GPS qui vous donne des directions, nous voulons regarder cette position pendant que vous vous déplacez. Dans ce cas, nous allons juste regarder la position dans laquelle je suis, et je vais montrer un petit indicateur de progression ici. Alors remplissons nos fonctions, et nous déciderons de ce que nous allons faire quand quelque chose se passe. Et la fonction d'erreur est un peu plus courte, Je vais juste montrer un petit indicateur de progression, et je montrerai le message et le code cela vient avec cette erreur. Donc ce ne sont que des propriétés que nous récupérons à partir de cet objet d'erreur qui est transmis. Maintenant, finalement je vais vouloir pour donner les informations de localisation que je trouve quand cela fonctionne à l'API Google Maps. Mais je vais commencer juste en affichant les informations que je reçois, donc ce ne sont que des éléments sur ma page. Et remarquez que je passe dans un objet de position ici. La position a un objet coords avec elle cela va contenir notre emplacement. Cela me donne la latitude, la longitude et la précision, à quelle distance est-il en mètres? Alors disons pour une adresse IP, ça va être plus une estimation approximative, alors que disons la triangulation de la tour de téléphonie cellulaire va être plus précis. Selon le type de lecture que nous obtenons, nous pourrions également obtenir l'altitude et la précision de l'altitude. Si nous surveillons la position, nous pouvons également obtenir la vitesse. Maintenant, cela ne va pas s'appliquer parce que je ne fais pas ça pendant que je conduis, Je suis juste assis. Donc, cela obtiendra toutes nos informations et nous l'afficherons sur la page, et j'ai quelques autres variables que je vais juste rester ici, parce que je donne cette information à l'API Google Maps ultérieurement. Que se passe-t-il à partir de maintenant, est que je dois avoir un compte de développeur Google Maps, et vous pouvez chercher comment faire cela, mais pour y accéder, J'ai besoin d'avoir ce script inclus. Ceci est le script de l'API Google Map, et je vais mettre ma clé de développeur ici. Je ne vais pas te le montrer cependant Parce que c'est ma clé et je n'aime pas partager. Pour que vous puissiez suivre les instructions et obtenez votre propre clé ici, et cela le rend afin que je puisse utiliser l'API Google Maps ultérieurement. Et je n'ai pas fait grand-chose avec ce code. C'est principalement du code passe-partout que vous pouvez obtenir à partir de la documentation de démarrage sur le site de Google. Quelques points importants que je veux souligner. On a un zoom sur la carte, passe de un à 15, donc je suis sur (indistinct), emménagé là-bas, et nous pouvons créer nos propres marqueurs personnalisés. Peut-être avez-vous vu des marqueurs sur des cartes contenant des images et des liens, ceux-ci sont relativement simples à faire. Dans ce cas, je vais juste marquer ça avec cette petite chose qui dit: «Nous sommes ici». La fonction d'initialisation ici dessine simplement la carte au départ. La carte va apparaître dans juste un div normal sur la page, donc cela désigne où cela va montrer. Alors ce que je vais faire, c'est avoir un autre bouton appelé afficher le nouvel emplacement, ça va appeler ça et donnez-nous une carte Google avec notre emplacement une fois qu'il s'exécute. Voyons donc à quoi ressemble notre page et voir si nous pouvons le découvrir où dans le monde nous sommes réellement. Remarquez d'abord, j'obtiens un dialogue. La géolocalisation est une option pour l'utilisateur, donc si je bloque cela, alors ma fonction obtiendra juste une erreur de retour me disant qu'il ne trouve pas ce qu'il cherchait. Je vais aller de l'avant et le permettre. On y va, voilà ma latitude et ma longitude. Maintenant, la précision va être très mauvaise dans ce cas. J'utilise une machine virtuelle, alors peut-être que cela a un peu gâché l'API, donc ça fait pas mal de mètres, mais nous avons obtenu un emplacement pour savoir d'où cela vient. Le reste maintenant, Je peux faire cela pour afficher ma position sur Google Map, et il le peint ici même sur cette toile. Maintenant, il y a mon petit marqueur qui dit: «Nous sommes ici». Je suis quelque part dans la région de Californie à ce stade, et après cela, ceci est juste une interface Google Maps classique. Tu peux tout faire avec ça que vous faites sur le site régulier. Dans cette leçon, nous avons cherché à obtenir notre emplacement puis faire quelques pas pour utiliser concrètement ces données de localisation. Merci d'avoir regardé. Dans notre prochaine leçon, nous allons jeter un œil au dessin avec l'API Canvas.
