javascript api - GPS Tracker in tempo reale su JUST HTML / JS e Google Maps da eseguire su un handphone? È possibile?



new (2)

Ho letto su GPS il monitoraggio in tempo reale e ho scoperto diverse cose a riguardo, principalmente richiedendo PHP, zope e un database per memorizzare i dati in arrivo. Alcuni altri metodi usano ajax con le relazioni con PHP.

Per quanto riguarda la mia domanda, è possibile farlo solo con html e JS, usando marcatori o qualsiasi altra cosa per popolare la mappa di Google quando ti muovi da qualche parte nella città? Ho bisogno di aiuto su questo, grazie!


Answers

Sì, è possibile. La maggior parte dei browser degli ultimi smartphone ha implementato l' API di geolocalizzazione W3C :

L'API di geolocalizzazione definisce un'interfaccia di alto livello per le informazioni sulla posizione associate solo al dispositivo che ospita l'implementazione, come latitudine e longitudine. La stessa API è agnostica delle fonti di informazioni sulla posizione sottostanti. Le fonti comuni di informazioni sulla posizione includono il Global Positioning System (GPS) e la posizione desunta dai segnali di rete come indirizzo IP, RFID, indirizzi MAC WiFi e Bluetooth e ID cella GSM / CDMA, nonché l'input dell'utente. Non viene fornita alcuna garanzia che l'API restituisca la posizione effettiva del dispositivo.

L'API è progettata per abilitare sia richieste di posizione "one shot" e ripetuti aggiornamenti di posizione, sia la possibilità di eseguire query esplicite sulle posizioni memorizzate nella cache.

Utilizzando l'API di geolocalizzazione per tracciare un punto su Google Maps, sarà simile a questo:

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');
} 

Quanto sopra raccoglierà la posizione solo una volta e non si aggiornerà automaticamente quando inizi a muoverti. Per gestirlo, è necessario mantenere un riferimento al proprio marcatore, chiamare periodicamente il metodo getCurrentPosition() e spostare l'indicatore sulle nuove coordinate. Il codice potrebbe essere simile a questo:

// 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();

Ora, se per tracciamento intendi che dovresti memorizzare queste informazioni su un server (in modo che qualcun altro possa vederti mentre ti sposti da una postazione remota), devi inviare i punti a uno script sul lato server usando AJAX.

Inoltre, assicurati che i Termini di utilizzo dell'API di Google Maps consentano questo utilizzo prima di intraprendere un tale progetto.

AGGIORNAMENTO: l'API di geolocalizzazione W3C espone un metodo watchPosition() che può essere utilizzato al posto del meccanismo setTimeout() utilizzato nell'esempio precedente.


Sospetto che non ci sia altra soluzione che riscrivere le parti di Modernizr che usano codice inline o codice valutato dinamicamente (che si applica sia a JS che a CSS). Le esperienze di AngularJS ngCsp potrebbero essere utili qui.





javascript html google-maps gps tracking