Rispondere agli aggiornamenti della posizione con HTML5 (HTML)

Articolo
12/11/2015

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

Questo argomento descrive come rispondere alle modifiche alla posizione geografica dell'utente mediante l'API di georilevazione W3C in HTML5.

Prerequisiti

Devi avere familiarità con HTML e JavaScript.

Istruzioni

Passaggio 1: Aprire Microsoft Visual Studio

Apri un'istanza di Visual Studio.

Passaggio 2: 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 del dispositivo è attivata (non applicabile in Windows 10 Mobile)
L'impostazione dei servizi di posizione, Posizione, è attivata
In Scegli le app che possono usare la tua posizione, la tua app è attivata

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("#watchLoc").addEventListener("click",
                        watchloc);

                    // Add an event handler to the button.
                    document.querySelector("#stopWatching").addEventListener("click",
                        stopwatching);

                }));
        }
    };

    var loc = null;
    var watchId;

    function watchloc() {
        if (loc == null) {
            loc = window.navigator.geolocation;
        }
        if (loc != null) {
            watchId = loc.watchPosition(successCallback);
        }
    }

    function stopwatching() {
        loc.clearWatch(watchId);
    }

    function successCallback(pos) {
        document.getElementById('latitude').innerHTML = pos.coords.latitude;
        document.getElementById('longitude').innerHTML = pos.coords.longitude;
        document.getElementById('accuracy').innerHTML = pos.coords.accuracy;
    }

    function errorCallback(error) {
        var strMessage = "";

        // Check for known errors
        switch (error.code) {
            case error.PERMISSION_DENIED:
                strMessage = "Access to your location is turned off. " +
                    "Change your settings to turn it back on.";
                break;
            case error.POSITION_UNAVAILABLE:
                strMessage = "Data from location services is " +
                    "currently unavailable.";
                break;
            case error.TIMEOUT:
                strMessage = "Location could not be determined " +
                    "within a specified timeout period.";
                break;
            default:
                break;
        }
        document.getElementById("status").innerHTML = strMessage;
    }


    app.start();
})();

Passaggio 6: 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.

    Geolocation Event Sample<br />
    <br />

    <button id="watchLoc">Watch Location</button><br />
    <button id="stopWatching">Stop Watching</button><br />
    Latitude: <span id="latitude">Waiting for update...</span><br />
    Longitude: <span id="longitude">Waiting for update...</span><br />
    Accuracy: <span id="accuracy">Waiting for update...</span><br />
    <span id="status"> </span><br />

Passaggio 7: Compilare l'app

Scegli Compila > Compila soluzione per compilare il progetto.

Passaggio 8: 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

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

Argomenti correlati

Esempio di georilevazione per Windows 10

Esempio di georilevazione per Windows 8.1

Condividi tramite