Rispondere ad aggiornamenti della posizione basati sulla distanza (HTML)
[Questa documentazione è preliminare ed è soggetta a modifiche.]
Alcune app richiedono aggiornamenti della posizione solo quando l'utente si sposta di distanze significative. In questo argomento viene mostrato come creare un'app che consenta all'utente di regolare la distanza tra gli aggiornamenti della posizione. Questa distanza è nota come soglia di spostamento, ed è la modifica minima di posizione richiesta per generare un evento di aggiornamento della posizione. Implementando una soglia di movimento puoi creare un'app che fornisce solamente notizie locali o aggiornamenti meteo e che non ha bisogno di aggiornamenti della posizione a meno che l'utente non si sposti in un'altra città..
Il codice nell'app aggiorna una tabella ogni volta che viene generato un evento di aggiornamento della posizione, aggiungendo una riga contenente le nuove coordinate e la distanza di cui l'utente si è spostato dall'ultimo aggiornamento. La distanza viene calcolata con la formula haversine.
Se una soglia di movimento è stata immessa nella relativa casella, sarà possibile vedere che la distanza percorsa ogni volta che viene generato un evento è sempre inferiore alla soglia di spostamento.
Cosa sapere
Tecnologie
- Windows Runtime
Prerequisiti
- È necessaria una conoscenza di HTML e JavaScript.
Istruzioni
Passaggio 1: Verificare che la posizione sia abilitata
Prima che l'app possa accedere alla posizione, Posizione deve essere abilitato nel dispositivo. Nell'app Impostazioni controlla che le seguenti impostazioni di privacy per la posizione siano attivate:
- Posizione è attivata
- L'impostazione Consenti a Windows e alle app scelte di usare la tua posizione e la cronologia delle posizioni è attivata
- In Scegli le app che possono usare la tua posizione, la tua app è attivata
Nota In alcuni casi, le impostazioni Posizione e Scegli le app che possono usare la tua posizione potrebbero non essere disponibili.
Passaggio 2: Aprire Microsoft Visual Studio
Apri un'istanza di Visual Studio.
Passaggio 3: Creare un nuovo progetto
Crea un nuovo progetto scegliendo un'Applicazione vuota dai tipi di progetto App di JavaScript/Windows Store.
Passaggio 4: Abilitare la funzionalità Posizione
Fai doppio clic su package.appxmanifest in Esplora soluzioni sia per progetti per Windows che per Windows Phone e seleziona la scheda Funzionalità. Seleziona Posizione nell'elenco Funzionalità. Questo aggiunge la funzionalità di dispositivo Location
al file manifesto del pacchetto.
<Capabilities>
<!-- DeviceCapability elements must follow Capability elements (if present) -->
<DeviceCapability Name="location"/>
</Capabilities>
Passaggio 5: Sostituire il codice JavaScript
Nel progetto condiviso apri default.js (/js/default.js). Sostituisci il codice nel file con questo codice.
(function () {
"use strict";
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
args.setPromise(WinJS.UI.processAll().
done(function () {
// Add an event handler to the button.
document.querySelector("#startTracking").addEventListener("click",
trackloc);
// Add an event handler to the button.
document.querySelector("#stopTracking").addEventListener("click",
stoptracking);
}));
}
};
app.start();
})();
Passaggio 6: Inserire il codice per la creazione del localizzatore geografico e la gestione degli aggiornamenti di posizione.
Inserisci il codice seguente per gestire gli eventi quando viene premuto un pulsante e per gestire i cambiamenti di posizione.
var eventCount = 0; // The number of positionchanged events that have been raised.
var loc = null;
// Create the Geolocator, set movementThreshold if specified,
// and subscribe to events.
function trackloc() {
if (loc == null) {
loc = new Windows.Devices.Geolocation.Geolocator();
}
if (loc != null) {
// Set movementThreshold
var threshold = document.getElementById("threshold").value;
if (threshold >= 0) {
loc.movementThreshold = threshold;
}
loc.addEventListener("positionchanged", onPositionChanged);
loc.addEventListener("statuschanged", onStatusChanged);
}
else {
document.getElementById('status').innerHTML = "Geolocator not found.";
}
}
function stoptracking() {
if (loc != null) {
loc.removeEventListener("positionchanged", onPositionChanged);
}
}
function onPositionChanged(args) {
eventCount = eventCount + 1;
var pos = args.position;
addLatLong(pos.coordinate.point.position.latitude, pos.coordinate.point.position.longitude);
}
Passaggio 7: Inserire il codice per l'aggiornamento della tabella HTML
Aggiungi il codice seguente per aggiornare la tabella HTML delle posizioni e delle distanze totali.
// Add a table row containing the coordinates and distance moved.
// Add a table row containing the coordinates and distance moved.
function addLatLong(lat, long) {
var tabBody = document.getElementById("inputtable");
var row = document.createElement("TR");
// First cell - latitude.
var cell1 = document.createElement("TD");
cell1.innerHTML = lat;
cell1.id = "latitude" + eventCount;
row.appendChild(cell1);
// Second cell - longitude.
var cell2 = document.createElement("TD");
cell2.innerHTML = long;
cell2.id = "longitude" + eventCount;
row.appendChild(cell2);
// Third cell - distance
var cell3 = document.createElement("TD");
cell3.id = "distance" + eventCount;
if (eventCount < 2) {
cell3.innerHTML = "0";
}
else {
var prevLat = document.getElementById("latitude" + (eventCount - 1)).innerHTML;
var prevLong = document.getElementById("longitude" + (eventCount - 1)).innerHTML;
// multiply Distance by 1000 to get meters from km
cell3.innerHTML = Distance(prevLat, prevLong, lat, long) * 1000;
}
row.appendChild(cell3);
tabBody.appendChild(row);
}
Passaggio 8: Inserire il codice per il calcolo della distanza.
Inserisci questo codice per calcolare la distanza tramite la formula dell'emisenoverso.
// Calculates distance between two latitude/longitude coordinates in km,
// based on the haversine formula.
function Distance(prevLat, prevLong, currLat, currLong) {
// KNOWN CONSTANTS
var degreesToRadians = Math.PI / 180;
var earthRadius = 6371; // approximation in kilometers assuming earth to be spherical
// CONVERT LATITUDE AND LONGITUDE VALUES TO RADIANS
var previousRadianLat = prevLat * degreesToRadians;
var previousRadianLong = prevLong * degreesToRadians;
var currentRadianLat = currLat * degreesToRadians;
var currentRadianLong = currLong * degreesToRadians;
// CALCULATE RADIAN DELTA BETWEEN THE TWO POSITIONS
var latitudeRadianDelta = currentRadianLat - previousRadianLat;
var longitudeRadianDelta = currentRadianLong - previousRadianLong;
var expr1 = (Math.sin(latitudeRadianDelta / 2) * Math.sin(latitudeRadianDelta / 2)) +
(Math.cos(previousRadianLat) * Math.cos(currentRadianLat) * Math.sin(longitudeRadianDelta / 2) * Math.sin(longitudeRadianDelta / 2));
var expr2 = 2 * Math.atan2(Math.sqrt(expr1), Math.sqrt(1 - expr1));
var distanceValue = earthRadius * expr2;
return distanceValue;
}
Passaggio 9: Inserire il codice per la visualizzazione dei messaggi di stato.
Inserisci il codice seguente per la visualizzazione dei messaggi di stato.
// Handle change in status to display an appropriate message.
function onStatusChanged(args) {
var newStatus = args.status;
document.getElementById('geolocatorStatus').innerHTML =
getStatusString(newStatus);
}
function getStatusString(locStatus) {
switch (locStatus) {
case Windows.Devices.Geolocation.PositionStatus.ready:
// Location data is available
return "Location is available.";
break;
case Windows.Devices.Geolocation.PositionStatus.initializing:
// This status indicates that a GPS is still acquiring a fix
return "A GPS device is still initializing.";
break;
case Windows.Devices.Geolocation.PositionStatus.noData:
// No location data is currently available
return "Data from location services is currently unavailable.";
break;
case Windows.Devices.Geolocation.PositionStatus.disabled:
// The app doesn't have permission to access location,
// either because location has been turned off.
return "Your location is currently turned off. " +
"Change your settings through the Settings charm " +
" to turn it back on.";
break;
case Windows.Devices.Geolocation.PositionStatus.notInitialized:
// This status indicates that the app has not yet requested
// location data by calling GetGeolocationAsync() or
// registering an event handler for the positionChanged event.
return "Location status is not initialized because " +
"the app has not requested location data.";
case Windows.Devices.Geolocation.PositionStatus.notAvailable:
// Location is not available on this version of Windows
return "You do not have the required location services " +
"present on your system.";
break;
default:
return "Unknown status";
}
}
Passaggio 10: Aggiungere il codice HTML per le app
Apri il file default.html per i progetti per Windows e Windows Phone e copia il codice HTML seguente all'interno dei tag BODY nel file.
<span>Geolocation Event Sample</span><br />
<span id="MovementThresholdLabel">Movement Threshold in meters:</span><br />
<input id="threshold" type="text" /><br />
<button id="startTracking">Track Location</button><br />
<br />
<button id="stopTracking">Stop Tracking</button><br />
<table style="border: solid; width:auto">
<thead><tr><th>Latitude</th><th>Longitude</th><th>Distance (meters)</th></tr></thead>
<tbody id="inputtable">
<tr></tr>
</tbody>
</table>
<div id="geolocatorStatus"></div>
Passaggio 11: Compilare l'app
Scegli Compila > Compila soluzione per compilare il progetto.
Passaggio 12: Testare l'app
- Scegli Avvia debug dal menu Debug per testare la soluzione.
- La prima volta che esegui l'esempio, ti verrà richiesto di confermare se l'app può usare la posizione. Scegli l'opzione Consenti.
- Fai clic sul pulsante Recupera posizione per ottenere la posizione corrente.
Osservazioni
Nota I servizi di posizione usano origini diverse per determinare la posizione. Se non sono disponibili GPS, ripetitori e Wi-Fi, useranno l'indirizzo IP. In questo caso, tieni presente che potresti non ricevere alcun evento di aggiornamento della posizione, perché i dati dell'indirizzo IP non vengono aggiornati frequentemente.
Argomenti correlati
Esempio di georilevazione per Windows 10 Technical Preview
Esempio di georilevazione per Windows 8.1
Esempio di rilevamento della posizione geografica
Linee guida per applicazioni in grado di riconoscere la posizione