Introduzione
L'API Geolocation ti permette di sapere dove si trova l'utente e di tenerlo sotto controllo mentre si sposta, sempre con il consenso dell'utente. Questa funzionalità può essere utilizzata come parte delle query degli utenti, ad esempio per guidare un utente verso un punto di destinazione. Potrebbe essere utilizzato anche per "taggare in modo geografico" alcuni contenuti creati dall'utente, ad esempio per contrassegnare il luogo in cui è stata scattata una foto. L'API è indipendente dal dispositivo e non è importante per il modo in cui il browser determina la posizione, purché i client possano richiedere e ricevere dati sulla posizione in modo standard. Il meccanismo di base potrebbe essere tramite GPS o Wi-Fi o la semplice richiesta all'utente di inserire la sua posizione manualmente. Poiché una di queste ricerche richiederà del tempo, l'API è asincrona, quindi la passi un metodo di callback ogni volta che richiedi una posizione.
L'esempio qui è un contachilometri parziale che mostra la posizione iniziale e mostra la distanza percorsa dal caricamento della pagina.
Passaggio 1: Verifica la compatibilità
Puoi facilmente verificare la compatibilità testando la presenza dell'oggetto di 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: Dichiara il codice HTML del misuratore del percorso
In questo esempio stai creando un contachilometri parziale, pertanto 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>
I passaggi successivi utilizzeranno l'API Geolocation per completare tutti gli intervalli vuoti.
Passaggio 3: Determinare la posizione attuale dell'utente
getCurrentPosition() segnalerà in modo asincrono la posizione corrente dell'utente. Richiamala non appena viene caricata la pagina, in modo che compili correttamente la posizione iniziale e la salvi per un utilizzo futuro:
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 in questo dominio richiede le autorizzazioni, il browser solitamente verifica il consenso dell'utente. A seconda del browser, potrebbero anche esserci preferenze per consentire o non consentire sempre le ricerche di autorizzazioni, nel qual caso il processo di conferma verrà ignorato.
Dopo aver eseguito questo codice, dovresti essere in grado di vedere la posizione iniziale. A seconda del dispositivo di posizione utilizzato dal browser, l'oggetto di posizione potrebbe contenere in realtà molto di più oltre a latitudine e longitudine, ad esempio potrebbe includere un'altitudine o una direzione. Puoi approfondire l'esplorazione registrando la variabile di posizione nella console.
Passaggio 4: Gestire gli errori
Purtroppo non tutte le ricerche di località hanno esito positivo. Potrebbe non essere possibile individuare un GPS
o l'utente ha improvvisamente disattivato la ricerca della posizione. In caso di errore, verrà richiamato un secondo argomento facoltativo per getCurrentPosition(),
che ti consentirà di informare 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(). Invia automaticamente una notifica alla funzione di callback ogni volta che l'utente sposta:
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 potresti utilizzare i dati sulla posizione. Aggiungi una riga extra al gestore watchPosition() per completare 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 JavaScript è adattata da uno script fornito da Moveable Type ai sensi di 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;
}