Un contachilometri semplice utilizzando l'API Geolocation

Michael Mahemoff

Introduzione

L'API Geolocation ti consente di scoprire dove si trova l'utente e di monitorarlo mentre si sposta, sempre con il suo consenso. Questa funzionalità potrebbe essere utilizzata nell'ambito delle query degli utenti, ad esempio per guidare qualcuno a una destinazione. Potrebbe essere utilizzato anche per il "geotagging" di alcuni contenuti creati dall'utente, ad esempio per contrassegnare il luogo in cui è stata scattata una foto. L'API è indipendente dal dispositivo; non importa come il browser determina la posizione, purché i client possano richiedere e ricevere dati sulla posizione in modo standard. Il meccanismo sottostante potrebbe essere tramite GPS, Wi-Fi o semplicemente chiedendo all'utente di inserire manualmente la sua posizione. Poiché qualsiasi ricerca richiede del tempo, l'API è asincrona e le viene passato un metodo di callback ogni volta che richiedi una posizione.

L'esempio riportato di seguito è un contachilometri che mostra la posizione iniziale e mantiene la visualizzazione della distanza percorsa dal caricamento della pagina.

Passaggio 1: Verificare la compatibilità

Browser Support

• 5
• 12
• 3.5
• 5

Source

Puoi verificare facilmente la compatibilità verificando la presenza dell'oggetto geolocalizzazione:

// check for Geolocation support
if (navigator.geolocation) {
  console.log('Geolocation is supported!');
}
else {
  console.log('Geolocation is not supported for this Browser/OS version yet.');
}

Passaggio 2: Dichiarare l'HTML del contachilometri

In questo esempio stai creando un contachilometri, quindi dichiara il seguente codice HTML:

<div id="tripmeter">
<p>
Starting Location (lat, lon):<br/>
<span id="startLat">???</span>°, <span id="startLon">???</span>°
</p>
<p>
Current Location (lat, lon):<br/>
<span id="currentLat">???</span>°, <span id="currentLon">???</span>°
</p>
<p>
Distance from starting location:<br/>
<span id="distance">0</span> km
</p>
</div>

Nei passaggi successivi verrà utilizzata l'API Geolocation per compilare tutti gli elementi vuoti.

Passaggio 3: Determinare la posizione attuale dell'utente

getCurrentPosition() segnalerà in modo asincrono la posizione attuale dell'utente. Chiamalo non appena la pagina viene caricata, in modo che venga compilata correttamente e salvata la posizione iniziale:

window.onload = function() {
var startPos;
navigator.geolocation.getCurrentPosition(function(position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
});
};

Se è la prima volta che un'applicazione su questo dominio richiede autorizzazioni, in genere il browser controlla il consenso dell'utente. A seconda del browser, potrebbero essere presenti anche preferenze per consentire o meno sempre le ricerche delle autorizzazioni, in tal caso la procedura di conferma verrà ignorata.

Dopo aver eseguito questo codice, dovresti essere in grado di vedere la posizione iniziale. A seconda del dispositivo di geolocalizzazione utilizzato dal browser, l'oggetto posizione potrebbe contenere molto di più della latitudine e della longitudine, ad esempio potrebbe includere un'altitudine o una direzione. Per saperne di più, puoi registrare la variabile di posizione nella console.

Passaggio 4: Gestire gli errori

Purtroppo, non tutte le ricerche di località sono riuscite. È possibile che non sia stato possibile localizzare un dispositivo GPS o che l'utente abbia disattivato improvvisamente le ricerche di posizione. Un secondo argomento facoltativo per getCurrentPosition() viene chiamato in caso di errore, in modo da poter avvisare l'utente all'interno del callback:

window.onload = function() {
var startPos;
navigator.geolocation.getCurrentPosition(function(position) {
// same as above
}, function(error) {
alert('Error occurred. Error code: ' + error.code);
// error.code can be:
//   0: unknown error
//   1: permission denied
//   2: position unavailable (error response from locaton provider)
//   3: timed out
});
};

Passaggio 5: Monitorare la posizione dell'utente

La chiamata precedente a getCurrentPosition() è stata eseguita una sola volta, al caricamento della pagina. Per monitorare le modifiche, utilizza watchPosition(). Avvisa automaticamente una funzione di callback ogni volta che l'utente si muove:

navigator.geolocation.watchPosition(function(position) {
document.getElementById('currentLat').innerHTML = position.coords.latitude;
document.getElementById('currentLon').innerHTML = position.coords.longitude;
});

Passaggio 6: Mostra distanza percorsa

Questo passaggio non è direttamente correlato all'API Geolocation, ma completa la demo e fornisce un esempio di come utilizzare i dati sulla posizione. Aggiungi un'altra riga all'handler watchPosition() per compilare la distanza percorsa:

navigator.geolocation.watchPosition(function(position) {
// same as above
document.getElementById('distance').innerHTML =
    calculateDistance(startPos.coords.latitude, startPos.coords.longitude,
                    position.coords.latitude, position.coords.longitude);
});

La funzione calculateDistance() esegue un algoritmo geometrico per determinare la distanza tra due coordinate. L'implementazione di JavaScript è adattata da uno script fornito da Moveable Type in base a una licenza Creative Commons:

function calculateDistance(lat1, lon1, lat2, lon2) {
var R = 6371; // km
var dLat = (lat2 - lat1).toRad();
var dLon = (lon2 - lon1).toRad();
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
        Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
        Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
return d;
}
Number.prototype.toRad = function() {
return this * Math.PI / 180;
}