Responder a actualizaciones de ubicación con HTML5 (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 tema verás cómo responder a los cambios en la ubicación geográfica del usuario con la API de ubicación geográfica de W3C en HTML5.
Requisitos previos
Debes tener conocimientos de HTML y JavaScript.
Instrucciones
Paso 1: Abrir Microsoft Visual Studio
Abre una instancia de Visual Studio.
Paso 2: 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
Paso 3: crear un proyecto
Crea un nuevo proyecto. Para ello, elige una Aplicación vacía en los tipos de proyecto JavaScript/de la Tienda Windows.
Paso 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>
Paso 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("#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();
})();
Paso 6: Agregar el HTML de las aplicaciones
Abre el archivo default.html de los proyectos de Windows y Windows Phone y copia el siguiente HTML dentro de las etiquetas BODY del archivo.
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 />
Paso 7: Compilar la aplicación
Elige Compilar > Compilar solución para compilar el proyecto.
Paso 8: 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.
Observaciones
Servicios de ubicación usa una serie de orígenes diferentes para determinar la ubicación. Si el GPS, las torres de telefonía móvil y el Wi-Fi no están disponibles, se usará la dirección IP en su lugar. En ese caso, ten en cuenta que es posible que no recibas ningún evento de actualización de ubicación, dado que los datos de la dirección IP no se actualizan con frecuencia.