Compartir a través de


Responder a actualizaciones de ubicación (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 se explica cómo responder a los cambios en la ubicación del usuario.

Lo que debes saber

Tecnologías

  • Windows Runtime

Requisitos previos

Debes tener conocimientos de HTML y JavaScript.

Instrucciones

Paso 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

Paso 2: Abrir Microsoft Visual Studio

Crea un nuevo proyecto. Para ello, elige una Aplicación vacía en los tipos de proyecto JavaScript/de la Tienda Windows.

Paso 3: crear un proyecto

En el cuadro de diálogo Nuevo proyecto, elige una aplicación vacía en los tipos de proyecto JavaScript.

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

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

                }));
        }
    };

    var loc = null;

    function trackloc() {
        if (loc == null) {
            loc = new Windows.Devices.Geolocation.Geolocator();
        }
        if (loc != null) {
            loc.addEventListener("positionchanged", onPositionChanged);
            loc.addEventListener("statuschanged", onStatusChanged);
            // display initial status, in case location is turned off.
            document.getElementById('geolocatorStatus').innerHTML =
                getStatusString(loc.locationStatus);
        }
    }

    function stoptracking() {
        if (loc != null) {
            loc.removeEventListener("positionchanged", onPositionChanged);
        }
    }

    function onPositionChanged(args) {
        var pos = args.position;
        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);
    }

    // Handle change in status to display an appropriate message.        
    function onStatusChanged(args) {
        var newStatus = args.status;
        document.getElementById('geolocatorStatus').innerHTML =
            getStatusString(newStatus);
    }

    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.";
            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:
                return "Unknown status.";
        }
    }

    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.

    <p>Geolocation Event Sample</p><br />
    <span id="status"></span><br />
    <button id="startTracking">Track Location</button><br />
    <br />
    <button id="stopTracking">Stop Tracking</button><br />
    Latitude: <span id="latitude">Waiting for update...</span><br />
    Longitude:  <span id="longitude">Waiting for update...</span><br />
    Accuracy (in meters): <span id="accuracy">Waiting for update...</span><br />
    Location Status: <span id="geolocatorStatus"></span><br />

Paso 7: Compilar la aplicación

Elige Compilar > Compilar solución para compilar el proyecto.

Paso 8: Probar la aplicación

  1. En el menú Depurar, haz clic en Iniciar depuración para probar la solución.
  2. 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).
  3. 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.

Si la aplicación solo necesita obtener datos de ubicación una vez, en lugar de suscribirse a actualizaciones, usa el método GetGeopositionAsync como se describe en Inicio rápido: detección de la ubicación del usuario.

Temas relacionados

Muestra de geolocalización de Windows 10

Muestra de geolocalización de Windows 8.1

Windows.Devices.Geolocation