Compartilhar via


Responder a atualizações de localização usando HTML5 (HTML)

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente]

Este tópico mostra como responder as alterações na posição geográfica do usuário, usando a API de Geolocalização W3C em HTML5.

Pré-requisitos

Você deve estar familiarizado com HTML e JavaScript.

Instruções

Etapa 1: Abrir o Microsoft Visual Studio

Abra uma instância do Visual Studio.

Etapa 2: Verifique se o local está habilitado

Para que seu aplicativo possa acessar a localização, é necessário habilitar Localização no dispositivo. No aplicativo Configurações, verifique se as seguintes configurações de privacidade de localização estão ativadas:

  • Localização deste dispositivo... está ativada (não aplicável no Windows 10 Mobile)
  • A configuração de serviços de localização, Localização, está ativada
  • Em Choose apps that can use your location, seu aplicativo está definido como ativado

Etapa 3: Criar um novo projeto

Crie um novo projeto, escolhendo um Aplicativo em Branco nos tipos de projetos de Aplicativos JavaScript/Store.

Etapa 4: Habilitar a funcionalidade de localização

Clique duas vezes em package.appxmanifest no Gerenciador de Soluções, tanto para projetos do Windows como do Windows Phone, e selecione a guia Funcionalidades. Em seguida, selecione Localização na lista Funcionalidades. Isso adiciona a funcionalidade Location do dispositivo ao arquivo de manifesto do pacote.

  <Capabilities>
    <!-- DeviceCapability elements must follow Capability elements (if present) -->
    <DeviceCapability Name="location"/>
  </Capabilities>

Etapa 5: Substituir o código JavaScript

No projeto compartilhado, abra default.js (/js/default.js). Substitua o código no arquivo a seguir.

(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();
})();

Etapa 6: Adicionar o HTML para os aplicativos

Abra o arquivo default.html dos projetos do Windows e do Windows Phone e copie o seguinte HTML para dentro das marcas BODY do arquivo.

    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 />

Etapa 7: Compilar o aplicativo

Escolha Compilar > Compilar solução para compilar o projeto.

Etapa 8: Teste o aplicativo

  1. No menu Depurar, clique em Iniciar Depuração para testar a solução.
  2. Quando você executar a amostra pela primeira vez, você verá uma solicitação que pergunta se o aplicativo pode usar a sua localização. Selecione a opção Permitir.
  3. Clique no botão Obter localização para obter a localização atual.

Comentários

Serviços de localização usa uma série de fontes diferentes para determinar a localização. Se não houver GPS, torres de celular e Wi-Fi disponíveis, será usado o endereço IP. Nesse caso, observe que você talvez não receba nenhum evento de atualização de localização, pois os dados de endereço IP não são atualizados com frequência.

Tópicos relacionados

Exemplo de geolocalização do Windows 10

Exemplo de geolocalização do Windows 8.1