Detectar a localização do usuário (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 tutorial descreve as etapas necessárias para detectar a localização geográfica de um usuário usando a API de localização geográfica do Tempo de execução do Windows.

Objetivo: Você aprenderá a maneira mais simples de detectar a localização geográfica de um usuário. Neste tutorial, você criará um aplicativo simples e que faz uma solicitação de dados de localização uma única vez. A chamada de getGeoPositionAsync apenas uma vez, como este exemplo faz, pode ser suficiente para aplicativos que usam a localização para uma tarefa única, como marcação geográfica de uma mensagem de email. Se a localização for essencial para o aplicativo ou se o aplicativo exigir atualizações de localização, ele deverá tratar os eventos de localização conforme discutido em Como responder às atualizações de localização.

Pré-requisitos

Você deve ser familiarizado com HTML e JavaScript.

Instruções

1. Verificar se a localização está habilitada

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

2. Abrir o Microsoft Visual Studio

Abra uma instância do Visual Studio.

3. Criar um Novo Projeto

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

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>

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("#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. 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.

<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. Compilar o aplicativo

No menu Compilar, clique em Compilar Solução para compilar o projeto.

8. Compilar o aplicativo

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

9. 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.

Resumo

Nesse início rápido, você criou um aplicativo simples para a detecção da localização atual do usuário.

A solicitação da localização é iniciada no código abaixo, que cria um objeto Geolocator, chama getGeoPositionAsync, e especifica manipuladores para êxito e falha:

function getloc() {
    if (loc == null) {
        loc = new Windows.Devices.Geolocation.Geolocator();
    }
    if (loc != null) {
        loc.getGeopositionAsync().then(getPositionHandler, errorHandler);
    }
}

A função getPositionHandler exibirá a latitude, longitude e precisão se a localização estiver disponível:

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

A função errorHandler chamará a função auxiliar getStatusString para exibir uma mensagem de status apropriada se a detecção da localização não tiver êxito:

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

Tópicos relacionados

Exemplo de geolocalização do Windows 10

Exemplo de geolocalização do Windows 8.1

Exemplos do SDK do Bing Mapas

Windows.Devices.Geolocation