Suivi de la géolocalisation avec l'API Google Maps

Voici la troisième partie de notre série de quatre articles sur la création de cartes en temps réel et l'API de géolocalisation pour suivre les appareils à l'aide de la plateforme Google Maps et de PubNub.

Qu'est-ce que la géolocalisation ?

Dans ce tutoriel pour débutants, nous allons construire une application qui met à jour en temps réel les marqueurs cartographiques de l'API JavaScript de Google Maps que nous avons construits dans la deuxième partie avec des capacités de géolocalisation en temps réel. Nous utiliserons l'API HTML5 de géolocalisation pour collecter la position de l'utilisateur à partir de son appareil, et pour diffuser et publier les changements de position (basés sur la position déclarée par l'appareil) sur la carte en utilisant PubNub Real-time Messaging - le suivi de la position en temps réel !

Vue d'ensemble du tutoriel

Le code de cet exemple est disponible dans CodePen ici .

Notez que vous devrez spécifier votre propre clé API de Google Cloud Platform pour activer la démo.

Si vous ne l'avez pas encore fait, vous devez d'abord vous occuper de quelques conditions préalables que nous avons abordées dans les parties 1 et 2, où nous avons configuré notre environnement JavaScript et commencé à utiliser les marqueurs de carte.

Maintenant que nous avons tous les paramètres de configuration pertinents et que nous avons nos marqueurs de carte, commençons à collecter et à publier des données de localisation pour notre carte web ou web mobile.

Présentation du code

Nous avons notre DIV pour l'application, et le DIV pour contenir la carte déjà mis en place dans notre tutoriel précédent. Il est maintenant temps d'utiliser l'API de localisation HTML5 pour mettre à jour notre position en temps réel.

API de localisation HTML5

Nous allons procéder étape par étape. Nous commençons par définir une latitude et une longitude initiales dans les environs de San Francisco. Ensuite, nous créons une fonction pour obtenir la position de l'appareil à l'aide de l'API de localisation HTML5 et mettre à jour les variables de localisation du navigateur. Nous définissons un minuteur d'intervalle pour obtenir périodiquement l'emplacement de l'appareil. Pour plus de commodité, nous créons un objet JavaScript contenant les valeurs de latitude et de longitude.

L'extrait de code JavaScript suivant montre comment obtenir la position actuelle de l'utilisateur :

<script>
window.lat = 37.7850;
window.lng = -122.4383;
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(updatePosition);
    }
    return null;
};
function updatePosition(position) {
  if (position) {
    window.lat = position.coords.latitude;
    window.lng = position.coords.longitude;
  }
}
setInterval(function(){updatePosition(getLocation());}, 10000);
function currentLocation() {
  return {lat:window.lat, lng:window.lng};
};

OK, maintenant que nous avons éliminé les problèmes de localisation HTML5, passons aux choses sérieuses.

Emplacement réel

Nous définissons des variables map et mark pour contenir nos objets map et marker afin de pouvoir les manipuler à la volée au fur et à mesure que les événements PubNub arrivent. Ensuite, nous définissons le callback initialize que l'API JavaScript de Google Maps peut appeler lorsqu'elle est prête à se charger, et nous nous assurons qu'il est membre de l'objet window pour qu'il soit accessible à l'API.

var map;
var mark;
var initialize = function() {
  map  = new google.maps.Map(document.getElementById('map-canvas'), {center:{lat:lat,lng:lng},zoom:12});
  mark = new google.maps.Marker({position:{lat:lat, lng:lng}, map:map});
};
window.initialize = initialize;

Ensuite, nous définissons un gestionnaire d'événement redraw que nous appellerons chaque fois que nous recevrons un nouvel événement de changement de position à la volée. Dans la première partie de la fonction, nous fixons la latitude et la longitude aux nouvelles valeurs du message. Ensuite, nous invoquons les méthodes appropriées sur les objets carte et marqueur pour mettre à jour la position et recentrer la carte.

var redraw = function(payload) {
  lat = payload.message.lat;
  lng = payload.message.lng;
  map.setCenter({lat:lat, lng:lng, alt:0});
  mark.setPosition({lat:lat, lng:lng, alt:0});
};

Maintenant que nous avons défini nos rappels, nous disposons de toute la machinerie nécessaire pour initialiser la fonctionnalité de flux de données en temps réel de PubNub. Tout d'abord, nous décidons du nom du canal sur lequel nous attendons les nouvelles mises à jour de position. Ensuite, nous initialisons la bibliothèque PubNub en utilisant les clés de publication et d'abonnement que nous avons définies plus tôt dans l'étape 1 des prérequis.

Enfin, nous demandons à la bibliothèque PubNub de s'abonner au canal approprié et d'attacher la fonction redraw en tant qu'auditeur des événements entrants. Qu'est-ce qui crée ces événements, me direz-vous ? Restez à l'écoute !

var pnChannel = "map2-channel";
var pubnub = new PubNub({
  publishKey:   'YOUR_PUB_KEY',
  subscribeKey: 'YOUR_SUB_KEY'
});
pubnub.subscribe({channels: [pnChannel]});
pubnub.addListener({message:redraw});

Publier Lat/Long

Pour ce tutoriel simple, nous avons mis en place un minuteur d'intervalle JavaScript de base pour publier de nouvelles positions en fonction de l'heure actuelle. Toutes les 5000 millisecondes, nous invoquons la fonction de rappel anonyme qui publie un nouvel objet latitude/longitude (créé par l'appel à currentLocation()) sur le canal PubNub spécifié.

setInterval(function() {
  pubnub.publish({channel:pnChannel, message:currentLocation()});
}, 5000);
</script>

Enfin, nous initialisons l'API Google Maps à la toute fin pour nous assurer que les éléments DOM et les prérequis JavaScript sont satisfaits.

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=YOUR_GOOGLE_MAPS_API_KEY&callback=initialize"></script>
  </body>
</html>

Prochaines étapes

Nous avons terminé à 75 % et il est maintenant temps d'ajouter notre dernière fonctionnalité de la quatrième partie, les trajectoires de vol! Les trajectoires de vol montreront l'itinéraire emprunté par notre appareil en dessinant un tracé derrière le marqueur de carte.

Sommaire

Qu'est-ce que le suivi de géolocalisation ?Aperçu du tutorielCodeWalkthroughHTML5Location APILiveLocationPublishingLat/LongNextSteps

Comment PubNub peut-il vous aider ?

Cet article a été publié à l'origine sur PubNub.com

Notre plateforme aide les développeurs à construire, livrer et gérer l'interactivité en temps réel pour les applications web, les applications mobiles et les appareils IoT.

La base de notre plateforme est le réseau de messagerie en temps réel le plus grand et le plus évolutif de l'industrie. Avec plus de 15 points de présence dans le monde, 800 millions d'utilisateurs actifs mensuels et une fiabilité de 99,999 %, vous n'aurez jamais à vous soucier des pannes, des limites de concurrence ou des problèmes de latence causés par les pics de trafic.

Découvrez PubNub

Découvrez le Live Tour pour comprendre les concepts essentiels de chaque application alimentée par PubNub en moins de 5 minutes.

S'installer

Créez un compte PubNub pour un accès immédiat et gratuit aux clés PubNub.

Commencer

La documentation PubNub vous permettra de démarrer, quel que soit votre cas d'utilisation ou votre SDK.