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
Autenticarsi in modo sicuro su Azure tramite GitHub Actions
Accesso sicuro ai secrets attraverso i file in Azure Container Apps
Utilizzare HiLo per ottimizzare le insert in un database con Entity Framework
Recuperare un elemento inserito nella cache del browser tramite API JavaScript
Miglioramenti agli screen reader e al contrasto in Angular
Miglioramenti nell'accessibilità con Angular CDK
Generare file PDF da Blazor WebAssembly con iText
Limitare le richieste lato server con l'interactive routing di Blazor 8
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Eseguire query manipolando liste di tipi semplici con Entity Framework Core
Routing statico e PreRendering in una Blazor Web App
Generare token per autenicarsi sulle API di GitHub