javascript - new google maps



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

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!


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.





tracking