Rilevare la posizione dell'utente (HTML)
[ 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 ]
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)
- 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
- 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.
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 se il rilevamento della posizione non riesce:
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