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

Voici l'article de blog mis à jour, avec tous les mots-clés intégrés de manière transparente.

Il s'agit de la conclusion de la série de quatre articles sur la création d'applications web en temps réel avec des fonctions de géolocalisation en utilisant l'API JavaScript de Google Maps et PubNub. Notre tutoriel vous guidera à travers l'expérience utilisateur de la génération de trajectoires de vol à l'aide de JavaScript et de PubNub.

Pour un exemple de mise en œuvre, consultez notre démo Showcase sur le site web de PubNub. Naviguez vers la démo Géolocalisation pour voir comment nous incorporons PubNub avec le suivi en temps réel. Pour le code derrière la démo, naviguez vers notre Github pour voir comment tout cela fonctionne.

Que sont les trajectoires de vol ?

Les trajectoires de vol, telles qu'elles sont mises en œuvre dans ce tutoriel, font référence aux polylignes qui permettent de dessiner dynamiquement des trajectoires à travers des points spécifiés par l'utilisateur sur une carte qui réside soit sur votre appareil mobile, soit sur votre navigateur web. Ils font partie intégrante de l'API de géolocalisation HTML5 et de l'API de Google Maps pour le suivi des mouvements.

Vue d'ensemble du tutoriel

Assurez-vous d'avoir rempli les conditions préalables des parties 1, 2 et 3, où nous avons mis en place notre environnement JavaScript et abordé les marqueurs de carte et le suivi de la localisation.

Une fois que vous l'avez fait, passez à la partie suivante.

Présentation du code

Commençons par définir les variables let\ map\, mark\, et lineCoords\ pour contenir nos objets map, marker, et polyline coords. En faisant cela, nous pouvons les ajuster au fur et à mesure que les événements PubNub arrivent. Ensuite, nous définissons le callback initialize\ qui est utilisable par l'API JavaScript de Google Maps lorsqu'elle est prête à être chargée. Assurez-vous de remplacer YOUR\_GOOGLE\_MAPS\_API\_KEY\ par votre véritable clé API.

let map;
let mark;
let lineCoords = [];
let 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;

Maintenant, avec le gestionnaire d'événement "redraw", nous allons mettre à jour les nouvelles informations de localisation à la volée en invoquant la méthode getCurrentPosition()\ de la géolocalisation.

Lat/Long

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, marqueur et polyligne pour mettre à jour la position, l'ajouter à la fin de la ligne 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});
  lineCoords.push(new google.maps.LatLng(lat, lng));
  var lineCoordinatesPath = new google.maps.Polyline({
    path: lineCoords,
    geodesic: true,
    strokeColor: '#2E10FF'
  });
  lineCoordinatesPath.setMap(map);
};

Initialiser PubNub

Après avoir défini nos callbacks, nous allons initialiser la fonctionnalité de streaming de données en temps réel PubNub qui fonctionne sur les téléphones mobiles, les tablettes, les navigateurs et les ordinateurs portables à travers des piles technologiques comme iOS, Android, JavaScript, .NET, Java, Ruby, Python, PHP, et plus encore.

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

La fonctionnalité de PubNub permettant de publier et de s'abonner à des sujets dans des canaux en temps réel offre des capacités de flux de données efficaces.

Publier Lat/Long

Pour ce tutoriel simple, nous avons mis en place un minuteur d'intervalle JavaScript de base pour publier de nouvelles positions basées sur l'heure actuelle. Toutes les 500 millisecondes, nous invoquons la fonction de rappel anonyme qui publie un nouvel objet latitude/longitude (avec des coordonnées en mouvement vers le nord-est) sur le canal PubNub spécifié. Dans votre application, vous obtiendrez probablement la position d'un appareil en direct ou d'une position rapportée par l'utilisateur.

setInterval(function() {
  pubnub.publish({channel:pnChannel, message:{lat:window.lat + 0.001, lng:window.lng + 0.01}});
}, 500);

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>

Récapitulation

Cette série de tutoriels nous a montré comment l'API Google Maps et PubNub fonctionnent exceptionnellement bien ensemble pour le suivi de la localisation en temps réel sur les applications web et mobiles. C'est similaire à la façon dont les services de covoiturage comme Uber et Lyft affichent le mouvement de leurs véhicules en temps réel.

Découvrez PubNub

Regardez le Live Tour pour comprendre les concepts essentiels derrière chaque application alimentée par PubNub en moins de 5 minutes. Découvrez l'expérience de nos utilisateurs directement à partir de notre page GitHub et des témoignages disponibles sur notre site web.

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 d'être opérationnel, quel que soit votre cas d'utilisation. Nous avons des sections dédiées à l'API JavaScript Google Maps et comment les utiliser avec le suivi en temps réel dans notre SDK.