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

Question

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, utilizzando marcatori o qualsiasi altra cosa per popolare la mappa di Google quando ci si sposta in qualsiasi punto della città? Ho bisogno di aiuto su questo, grazie!

Answer 1

Sì, è possibile. La maggior parte dei browser negli ultimi smartphone hanno attuato la W3C Geolocation API:

L'API Geolocation definisce un'interfaccia di alto livello per le informazioni sulla posizione associato solo con il dispositivo che ospita l'attuazione, come ad esempio 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 le richieste di posizione "one-shot" e gli aggiornamenti di posizione ripetuti, sia la possibilità di eseguire query esplicite sulle posizioni memorizzate nella cache.

Utilizzando l'API Geolocation per tracciare un punto su Google Maps, sarà simile a questa:

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

È possibile che si riuniranno solo la posizione una volta, e non saranno aggiornamento automatico quando si inizia a muoversi. Per gestirlo, è necessario mantenere un riferimento al proprio indicatore, 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 rintracciando vuoi dire che si dovrebbe anche memorizzare queste informazioni su un server (in modo che qualcun altro potrebbe vedere in movimento da una postazione remota), allora si sarebbe è necessario inviare i punti a uno script sul lato server utilizzando AJAX.

Inoltre, assicurarsi che lo consenta questo utilizzo prima di impegnarsi in tale progetto.

---

UPDATE: API W3C Geolocation espone un metodo watchPosition() che può essere utilizzato al posto del meccanismo setTimeout() abbiamo usato nell'esempio precedente.