Windows Dev Center

Linguaggio: HTML | XAML

Rilevare la posizione dell'utente (HTML)

[Alcune informazioni sono relative a un prodotto non definitivo che potrebbe subire modifiche sostanziali prima del rilascio sul mercato. Microsoft non riconosce alcuna garanzia, espressa o implicita, in merito alle informazioni fornite qui.]

In questa esercitazione vengono discussi i passaggi richiesti per rilevare la posizione geografica dell'utente usando API di georilevazione Windows Runtime.

Obiettivo: Imparerai il modo più semplice per rilevare la posizione geografica di un utente. In questa esercitazione creerai una semplice app che effettua una singola richiesta di dati sulla posizione. Chiamare getGeoPositionAsync una sola volta, come descritto in questo esempio, potrebbe essere sufficiente alle app che usano la posizione per una singola attività, ad esempio effettuare il geotagging di un messaggio email. Se per l'app la posizione è fondamentale o se l'app richiede aggiornamenti di posizione, tale app dovrebbe gestire eventi di posizione in base a quanto discusso in Come rispondere agli aggiornamenti della posizione.

Prerequisiti

È necessaria una conoscenza dei linguaggi HTML e JavaScript.

Istruzioni

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

2. Aprire Microsoft Visual Studio

Apri un'istanza di Visual Studio.

3. Creare un nuovo progetto

Crea un nuovo progetto scegliendo un'Applicazione vuota dai tipi di progetto App di JavaScript/Windows Store.

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>

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("#getLocation").addEventListener("click",
                        getLoc);
                }));
        }
    };

    var loc = null;

    function getLoc() {
        if (loc == null) {
            loc = new Windows.Devices.Geolocation.Geolocator();
        }
        if (loc != null) {
            loc.getGeopositionAsync().then(getPositionHandler, errorHandler);
        }
    }

    function getPositionHandler(pos) {
        document.getElementById('latitude').innerHTML = pos.coordinate.point.position.latitude;
        document.getElementById('longitude').innerHTML = pos.coordinate.point.position.longitude;
        document.getElementById('accuracy').innerHTML = pos.coordinate.accuracy;
        document.getElementById('geolocatorStatus').innerHTML =
            getStatusString(loc.locationStatus);
    }

    function errorHandler(e) {        
        document.getElementById('errormsg').innerHTML = e.message;
        // Display an appropriate error message based on the location status.
        document.getElementById('geolocatorStatus').innerHTML =
            getStatusString(loc.locationStatus);    
    }

    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.";
                break;
            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:
                break;
        }
    }

    app.start();
})();

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.


<div>
    <p>Click "Get Location" to get geolocation data.</p>
    <br />
    <button id="getLocation">getLocation</button> <br />
</div>
<br/>
<div>
    Latitude: <span id="latitude"></span><br />
    Longitude: <span id="longitude"></span><br />
    Accuracy (in meters): <span id="accuracy"></span><br />
    Location Status: <span id="geolocatorStatus"></span><br />
    Error Message: <span id="errormsg"></span><br />
</div>

7. Compilare l'app

Scegli Compila soluzione dal menu Compila per compilare il progetto.

8. Compilare l'app

Scegli Compila > Compila soluzione per compilare il progetto.

9. Testare l'app

  1. Scegli Avvia debug dal menu Debug per testare la soluzione.
  2. La prima volta che esegui l'esempio, ti verrà richiesto di confermare se l'app può usare la posizione. Scegli l'opzione Consenti.
  3. Fai clic sul pulsante Recupera posizione per ottenere la posizione corrente.

Riepilogo

In questa guida introduttiva, hai creato una semplice app per la rilevazione della posizione attuale dell'utente.

La richiesta di localizzazione viene avviata nel seguente codice, che crea un oggetto Geolocator, chiama getGeoPositionAsync e specifica i gestori per le operazioni eseguite correttamente o meno:


function getloc() {
    if (loc == null) {
        loc = new Windows.Devices.Geolocation.Geolocator();
    }
    if (loc != null) {
        loc.getGeopositionAsync().then(getPositionHandler, errorHandler);
    }
}

La funzione getPositionHandler visualizza latitudine, longitudine e, se disponibile, l'accuratezza della posizione:


function getPositionHandler(pos) {
    document.getElementById('latitude').innerHTML = pos.coordinate.point.position.latitude;
    document.getElementById('longitude').innerHTML = pos.coordinate.point.position.longitude;
    document.getElementById('accuracy').innerHTML = pos.coordinate.accuracy;
    document.getElementById('geolocatorStatus').innerHTML =
            getStatusString(loc.locationStatus);
}

La funzione errorHandler chiama la funzione helper getStatusString per visualizzare un messaggio di stato appropriato in caso di mancato rilevamento della posizione:


function errorHandler(e) {        
    document.getElementById('errormsg').innerHTML = e.message;
    // Display an appropriate error message based on the location status.
    document.getElementById('geolocatorStatus').innerHTML =
        getStatusString(loc.locationStatus);    
}

Argomenti correlati

Esempio di georilevazione per Windows 10 Insider Preview
Esempio di georilevazione per Windows 8.1
Esempi di SDK di Bing Mappe
Windows.Devices.Geolocation

 

 

Mostra:
© 2015 Microsoft