web-dev-qa-db-fra.com

Tracker GPS en temps réel sur JUST HTML / JS et Google Maps pour être exécuté sur un téléphone portable? C'est possible?

J'ai lu sur le suivi GPS en temps réel et découvert plusieurs choses à ce sujet, nécessitant principalement PHP, Zope et une base de données pour stocker les données entrantes. Certaines autres méthodes utilisent ajax avec les relations avec PHP.

En ce qui concerne ma question, est-il possible de le faire avec juste du HTML et du JS, en utilisant des marqueurs ou autre chose pour remplir la carte Google lorsque vous vous déplacez n'importe où dans la ville? Besoin d'aide à ce sujet, merci!

javascripthtmlgoogle-mapsgpstracking
30
cheesebunz

Oui c'est possible. La plupart des navigateurs des derniers smartphones ont implémenté W3C Geolocation API :

L'API de géolocalisation définit une interface de haut niveau pour les informations de localisation associées uniquement au périphérique hébergeant l'implémentation, telles que la latitude et la longitude. L'API elle-même est indépendante des sources d'informations de localisation sous-jacentes. Les sources courantes d'informations de localisation comprennent le système de positionnement mondial (GPS) et l'emplacement déduit des signaux réseau tels que l'adresse IP, les adresses MAC RFID, WiFi et Bluetooth et les identifiants de cellule GSM/CDMA, ainsi que les entrées des utilisateurs. Aucune garantie n'est donnée que l'API renvoie l'emplacement réel de l'appareil.

L'API est conçue pour permettre à la fois les demandes de position "à un coup" et les mises à jour répétées de position, ainsi que la possibilité d'interroger explicitement les positions mises en cache.

L'utilisation de l'API de géolocalisation pour tracer un point sur Google Maps ressemblera à ceci:

if (navigator.geolocation) { 
  navigator.geolocation.getCurrentPosition(function(position) {  

    var point = new google.maps.LatLng(position.coords.latitude, 
                                       position.coords.longitude);

    // Initialize the Google Maps API v3
    var map = new google.maps.Map(document.getElementById('map'), {
       zoom: 15,
      center: point,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    // Place a marker
    new google.maps.Marker({
      position: point,
      map: map
    });
  }); 
} 
else {
  alert('W3C Geolocation API is not available');
}

Ce qui précède ne rassemblera la position qu'une seule fois et ne sera pas mis à jour automatiquement lorsque vous commencerez à bouger. Pour gérer cela, vous devez conserver une référence à votre marqueur, appeler périodiquement la méthode getCurrentPosition() et déplacer le marqueur vers les nouvelles coordonnées. Le code pourrait ressembler à ceci:

// Initialize the Google Maps API v3
var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 15,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var marker = null;

function autoUpdate() {
  navigator.geolocation.getCurrentPosition(function(position) {  
    var newPoint = new google.maps.LatLng(position.coords.latitude, 
                                          position.coords.longitude);

    if (marker) {
      // Marker already created - Move it
      marker.setPosition(newPoint);
    }
    else {
      // Marker does not exist - Create it
      marker = new google.maps.Marker({
        position: newPoint,
        map: map
      });
    }

    // Center the map on the new position
    map.setCenter(newPoint);
  }); 

  // Call the autoUpdate() function every 5 seconds
  setTimeout(autoUpdate, 5000);
}

autoUpdate();

Maintenant, si en effectuant un suivi, vous voulez dire que vous devez également stocker ces informations sur un serveur (afin que quelqu'un d'autre puisse vous voir passer d'un emplacement distant), vous devrez envoyer les points à un script côté serveur à l'aide d'AJAX.

De plus, assurez-vous que les Conditions d'utilisation de l'API Google Maps autorisent cette utilisation, avant de vous lancer dans un tel projet.

MISE À JOUR: L'API de géolocalisation W3C expose une méthode watchPosition() qui peut être utilisée à la place de setTimeout() mécanisme que nous avons utilisé dans l'exemple ci-dessus.

45
Daniel Vassallo