In uno script precedente abbiamo visto come catturare i dati dal GPS, utilizzando le Geolocation API di HTML5 da un dispositivo mobile equipaggiato degli opportuni sensori.
https://www.html5italia.com/script/47/Sfruttare-Funzionalita-GPS-HTML5-Geolocation-API.aspx
In questo script utilizzeremo le coordinate della posizione corrente per calcolare la distanza da un punto di interesse, per farlo ricorreremo alla formula dell'emisenoverso (haversine) di seguito implementata nello script:
function degreeToRadians(value) {
return value * Math.PI / 180;
}
function getDistanceKm(lat1, lon1, lat2, lon2) {
// R: raggio della terra (paragonabile ad una sfera) in chilometri
var R = 6371;
var deltaLat = degreeToRadians(lat2-lat1);
var deltaLon = degreeToRadians(lon2-lon1);
lat1 =degreeToRadians(lat1);
lat2 =degreeToRadians(lat2);
var a = Math.sin(deltaLat/2) * Math.sin(deltaLat/2) +
Math.cos(lat1) * Math.cos(lat2) * Math.sin(deltaLon/2) * Math.sin(deltaLong/2);
var c = 2 * Math.atan2(Math.sqrt(a),Math.sqrt(1-a));
var d = R * c;
return d;
}
function updateDistances(){
var poi = document.querySelectorAll(".dist");
//Scorro gli elementi rappresentanti i punti di interesse, calcolando la distanza dalla posizione attuale
for (var i = 0; i < poi.length; i++) {
poi<i>.innerHTML = distance(startPosition.coords.latitude, startPosition.coords.longitude, poi<i>.dataset.lat, poi<i>.dataset.lon);
}
}
var startPosition;
//Gestione dell'evento di cambio posizione
function updateLocation(position) {
startPosition = position;
updateDistances();
}
//inizio il campionamento dei dati dal GPS
var watchId = navigator.geolocation.watchPosition(updateLocation, handleLocationError);
<h3>Distanze</h3>
<dl>
<dd>Capo di Leuca<span class="dist" data-lat="39.783333" data-lon="18.333333"></span> Km</dd>
<dd>Capo Spartivento<span class="dist" data-lat="38.8784" data-lon="8.8455"></span> Km</dd>
<dd>Capo Passero<span class="dist" data-lat="36.685" data-lon="15.14"></span> Km</dd>
<dd>...</dd>
</dl>
Maggiori dettagli sui principi applicati nella formula dell'emisenoverso sono disponibili su wikipedia a questo indirizzo: http://it.wikipedia.org/wiki/Emisenoverso
La specifica completa delle Geolocation API è disponibile qui: http://www.w3.org/TR/geolocation-API/
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Impostare il tipo di supporto dei campi Json in Entity Framework con Sql Server
Usare il metodo nameof con un tipo generico in C# 14
Utilizzo del persistent state di Blazor nel prerendering
Canary release con .NET Aspire
Escludere alcuni file da GitHub Copilot
Proteggere l'endpoint dell'agente A2A delle Logic App
Disabilitare la telemetria nella CLI di GitHub
Utilizzare zizmor per rendere più sicuri i workflow di GitHub
Utilizzare @property per animare nativamente un oggetto HTML tramite CSS
Referenziare un package NuGet in una file based app .NET
Definire il metodo di rilascio in .NET Aspire
Ridimensionamento automatico input tramite CSS


