Detecta la ubicación del usuario (HTML)
[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows en tiempo de ejecución. Si estás desarrollando para Windows 10, consulta la documentación más reciente
En este tutorial verás los pasos necesarios para detectar la ubicación geográfica de un usuario mediante la API de ubicación geográfica de Windows en tiempo de ejecución.
Objetivo: Verás cuál es la manera más sencilla de detectar la ubicación geográfica de un usuario. En este tutorial, crearás una aplicación sencilla que solicita una sola vez los datos de ubicación. Llamar a getGeoPositionAsync solo una vez, como hace este ejemplo, puede ser suficiente para aplicaciones que utilizan la ubicación para una tarea única, como agregar geoetiquetas a un mensaje de correo electrónico. Si la ubicación es esencial para la aplicación o si esta requiere actualizaciones de la ubicación, debe controlar los eventos de ubicación mencionados en Cómo responder a actualizaciones de la ubicación.
Requisitos previos
Debes tener conocimientos de HTML y JavaScript.
Instrucciones
1. Comprobar que la ubicación está habilitada
Antes de que la aplicación pueda tener acceso a la ubicación, la Ubicación debe estar habilitada en el dispositivo. En la aplicación Configuración, comprueba que la siguiente configuración de privacidad de ubicación esté activada:
- La ubicación de este dispositivo... está activada (no es aplicable para Windows 10 Mobile)
- La configuración de servicios de ubicación, "Ubicación", está activada
- En Elegir las aplicaciones que pueden usar tu ubicación, la aplicación está establecida en activada
2. Abrir Microsoft Visual Studio
Abre una instancia de Visual Studio.
3. Crear un nuevo proyecto
Crea un nuevo proyecto. Para ello, elige una Aplicación vacía en los tipos de proyecto JavaScript/de la Tienda Windows.
4. Habilitar la funcionalidad de ubicación
Haz doble clic en package.appxmanifest en el Explorador de soluciones para los proyectos de Windows y de Windows Phone y selecciona la pestaña Funcionalidades. A continuación, activa Ubicación en la lista Funcionalidades. De esta forma, se agrega la funcionalidad Location del dispositivo en el archivo de manifiesto del paquete.
<Capabilities>
<!-- DeviceCapability elements must follow Capability elements (if present) -->
<DeviceCapability Name="location"/>
</Capabilities>
5. Reemplazar el código JavaScript
En el proyecto compartido, abre default.js (/js/default.js). Reemplaza el código del archivo con el siguiente.
(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. Agregar el HTML de las aplicaciones
Abre el archivo default.html para los proyectos de Windows y Windows Phone y copia el HTML siguiente a dentro de las etiquetas BODY del archivo.
<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. Generar la aplicación
En el menú Generar, haz clic en Generar solución para generar el proyecto.
8. Compilar la aplicación
Elige Compilar > Generar solución para compilar el proyecto.
9. Probar la aplicación
- En el menú Depurar, haz clic en Iniciar depuración para probar la solución.
- La primera vez que ejecutes el ejemplo verás un mensaje que te preguntará si la aplicación puede usar tu ubicación. Elige la opción Allow (Permitir).
- Haz clic en el botón Get Location (Obtener ubicación) para obtener la ubicación actual.
Resumen
En este inicio rápido, has creado una aplicación sencilla para detectar la ubicación actual del usuario.
La solicitud de la ubicación se inicia en el código siguiente, que crea un objeto Geolocator, llama a getGeoPositionAsync y especifica controladores en caso correcto y de error:
function getloc() {
if (loc == null) {
loc = new Windows.Devices.Geolocation.Geolocator();
}
if (loc != null) {
loc.getGeopositionAsync().then(getPositionHandler, errorHandler);
}
}
La función getPositionHandler muestra la latitud, longitud y precisión si la ubicación está disponible:
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 función errorHandler llama a la función auxiliar getStatusString para mostrar un mensaje de estado adecuado si la detección de la ubicación no se realiza correctamente:
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);
}
Temas relacionados
Muestra de geolocalización de Windows 10
Muestra de geolocalización de Windows 8.1