Rispondere ad aggiornamenti della posizione basati sulla distanza (HTML)

Articolo
04/07/2015

[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.