Exportar (0) Imprimir
Expandir Tudo
Web
Expandir Minimizar

HTML5 – 12 ideias legais para localização geográfica e como usá-las

Danwei Tran Luciani

Microsoft Developer Evangelist

Março 2013

Saber a localização de seus usuários pode ajudar a melhorar a qualidade de seu site e aumentar a velocidade de seu serviço. No passado, usuários tinham de informar ativamente sua localização para um site, fosse digitando, usando uma longa lista suspensa ou clicando em um mapa. Agora, com a API de localização geográfica HTML5, encontrar seus usuários (com a permissão deles) está fácil como nunca. A Figura 1 mostra um site usando de localização geográfica para determinar o local de um usuário, representada em latitude e longitude. Os números podem ser convertidos facilmente em algo mais inteligível, como nome da rua ou cidade.

Dn144998.8EB362DD6A8A1FACF1ED125593B4D056(pt-br,MSDN.10).png

Figura 1 - Exibição da localização de um usuário com a ajuda da localização geográfica

Imagine a utilidade de seu site se ele pudesse fornecer horários online de todo o transporte público de uma determinada cidade. Usando localização geográfica, o site poderia recomendar rotas de viagem ideais para levar as pessoas o mais rápido possível onde elas estivessem indo. Usuários de desktop poderiam ter sua localização classificada segundo a proximidade com o computador. Usuários móveis tentando chegar em casa depois de uma noitada poderiam encontrar a parada de ônibus mais próxima. Essas possibilidades e outras estão a apenas uma API de distância.

Cenários para utilização da API de localização geográfica

Aqui estão 12 cenários simples que ilustram como um site pode acomodar usuários e personalizar sua experiência levando a localização deles em consideração. Alguns podem parecer óbvios, mas as pequenas coisas frequentemente fazem as maiores diferenças.

  1. Sites de transporte público podem listar paradas de ônibus e estações de metro mais próximas.
  2. Voltando para casa tarde da noite? Sites de táxis podem encontrá-lo, mesmo que você não saiba onde você.
  3. Sites de compras podem fornecer estimativas imediatas dos custos de envio.
  4. Agências de viagens podem fornecer dicas de férias melhores para o local e estação atuais.
  5. Sites de conteúdo podem determinar mais facilmente o idioma e dialetos de consultas de pesquisa.
  6. Sites imobiliários podem apresentar preços médios de casas em uma determinada área, uma ferramenta útil quando se está avaliando um bairro ou visitando imóveis.
  7. Sites de cinemas podem promover filmes em exibição na região.
  8. Jogos online podem acrescentar realidade dando missões que o usuário deve cumprir no mundo real.
  9. Sites de notícias podem incluir manchetes personalizadas locais e o clima em sua primeira página.
  10. Lojas online podem informar se têm produtos em estoque em varejistas locais.
  11. Sites de venda de ingressos para esportes e entretenimento podem promover futuros jogos e shows na área.
  12. Listas de ofertas de empregos podem incluir automaticamente os tempos potenciais de viagem de casa para o trabalho.

Como a localização geográfica funciona

Falando tecnicamente, um computador ou dispositivo móvel tem várias maneiras de descobrir sua própria localização (esperamos que no mesmo local do usuário).

  • O GPS é o meio mais preciso de se determinar o posicionamento, mas ele é mesmo eficaz em termos de energia que outras opções e, às vezes, requer um tempo de inicialização longo.
  • O A-GPS (GPS assistencial) usa triangulação entre torres de telefones celulares e postes públicos para determinar a localização. Embora não seja tão preciso quanto o GPS, o GPS-A é suficiente para muitos cenários.
  • Dispositivos móveis que suportam hotspots Wi-Fi podem usar pontos de acesso para determinar a localização do usuário.
  • Computadores estacionários sem dispositivos sem fio podem obter informações aproximadas de localização usando faixas de endereços IP conhecidos.

Quando se trata de compartilhar a localização física de usuários, privacidade é uma preocupação séria. Segundo a API de localização geográfica, "agentes de usuário não devem enviar informações de localização a sites sem a permissão expressa do usuário”. Em outras palavras, o usuário sempre deve decidir se compartilha informações de localização com um site. A Figura 2 mostra uma mensagem típica solicitando a permissão do usuário. Para mais informações sobre como garantir a segurança com a API de localização geográfica, leia Considerações de segurança e privacidade.

Dn144998.75DF0FEF59BC8455915FA73712AA5B6A(pt-br,MSDN.10).png

Figura 2 - Amostra de solicitação de permissão do usuário

Três funções simples

Está pronto para incorporar localização geográfica em seu site? Você precisa aprender apenas três funções simples para dominar toda a API, que reside no objeto localização geográfica, um atributo do objeto Navegador. (Saiba mais sobre o objeto geolocation aqui.)

A função getCurrentPosition obtém a localização do usuário uma vez. Ela toma dois argumentos na forma de retorno de chamada: uma para uma consulta de localização bem-sucedida e outra para uma consulta fracassada. O retorno de chamada bem-sucedido toma um objeto Position como argumento. Opcionalmente, ele toma um terceiro argumento na forma de um objeto PositionOptions.

navigator.geolocation.getCurrentPosition(locationSuccess, locationFail); 
 function locationSuccess(position) {
         latitude = position.coords.latitude;
         longitude = position.coords.longitude;
  }
  function locationFail() {
        alert(‘Oops, could not find you.’);
  }

O objeto Position contém as propriedades mostradas na tabela Figura 3.

Propriedade

Valor

Unidade

coords.latitude

double

graus

coords.longitude

double

graus

coords.altitude

double ou null

metros

coords.accuracy

double

metros

coords.altitudeAccuracy

double ou null

metros

coords.heading

double ou null

graus sentido horário

coords.speed

double ou null

metros/segundo

timestamp

DOMTimeStamp

como o objeto Date

Figura 3 - Propriedades do objeto Position

A função watchPosition continua pesquisando a posição do usuário e retorna uma ID associada. O dispositivo determina a taxa de atualizações e envia mudanças de localização para o servidor.

A função clearWatch para de pesquisar a posição do usuário. Ela toma a ID de watchPosition como um argumento.

Apresentação de dados de localização: geodésica ou civil

Existem duas formas de apresentar dados de localização ao usuário: geodésica e civil. A maneira geodésica de descrever posição se refere diretamente a latitude e longitude. A representação civil de dados de localização é um formato humano mais legível e compreensível.

Cada parâmetro tem tanto uma representação geodésica como civil, como ilustrado na tabela Figura 4.

Atributo

Geodésico

Civil

Posição

59.3, 18.6

Estocolmo

Elevação

10 metros

4o andar

Direção

234 graus

Do centro da cidade

Velocidade

5 km/h

Caminhando

Orientação

45 graus

Nordeste

Figura 4 - Exemplos de dados geodésicos e civis

Quando usa a API de localização geográfica, você recebe os dados geodésicos das funções. A apresentação de dados de localização em números brutos é raramente amigável ou útil. Serviços online, como Bing Maps e Yahoo GeoPlanet podem ajudá-lo a traduzir os dois modos de representação.

Suporte a navegador

  • Internet Explorer 9 +
  • Firefox 3.5+
  • Chrome 5+
  • Opera 10.6+
  • Safari 5+
  • iPhone 3+
  • Android 2+
  • Windows Phone 7.5+

Embora a localização geográfica funcione em todos os principais navegadores (Figura 5), você ainda tem de levar em consideração os cenários em que a localização não pode ser fornecida. Por exemplo, um usuário pode estar executando um navegador mais antigo ou ter hardware que não inclua dispositivos de posicionamento, ou simplesmente não queira compartilhar informações de localização automaticamente. A localização detectada pode até mesmo estar incorreta. Em tais situações, você deve incluir sempre uma alternativa ou um método de fallback para que os usuários possam inserir ou alterar sua localização manualmente.

A localização geográfica em ação

Copie e cole o código de exemplo e salve-o como um arquivo HTML. Abra-o em seu navegador favorito e siga as instruções em dois passos no site para ver a API de localização geográfica desenhar um círculo azul em torno de sua localização atual.

<html lang="en">
<head>
    <title>Geolocation demo</title>
    <meta charset="utf-8" />
</head>
<body>
    <h1>Geolocation demo</h1>
    <p>
        Find out approximately where you are.
    </p>
    <p>
        Step 1: <button onclick="GetMap()">Show map</button>
    </p>
    <p>
        Step 2: When prompted, allow your location to be shared to see Geolocation in action
    </p>
    <div id="mapDiv" style="position: relative; width: 800px; height: 600px;"></div>
    <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
    <script type="text/javascript">
        var map = null;
        function GetMap() {
            /* Replace YOUR_BING_MAPS_KEY with your own credentials.
                Obtain a key by signing up for a developer account at
                http://www.microsoft.com/maps/developers/ */
            var cred = "YOUR_BING_MAPS_KEY";
            // Initialize map
            map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
                { credentials: cred });
            // Check if browser supports geolocation
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(locateSuccess, locateFail);
            }
            else {
                alert('I\'m sorry, but Geolocation is not supported in your current browser. Have you tried running this demo in IE9?');
            }
        }
        // Successful geolocation
        function locateSuccess(loc) {
            // Set the user's location
            var userLocation = new Microsoft.Maps.Location(loc.coords.latitude, loc.coords.longitude);
            // Zoom in on user's location on map
            map.setView({ center: userLocation, zoom: 17 });
            // Draw circle of area where user is located
            var locationArea = drawCircle(userLocation);
            map.entities.push(locationArea);
        }
        // Unsuccessful geolocation
        function locateFail(geoPositionError) {
            switch (geoPositionError.code) {
                case 0: // UNKNOWN_ERROR
                    alert('An unknown error occurred, sorry');
                    break;
                case 1: // PERMISSION_DENIED
                    alert('Permission to use Geolocation was denied');
                    break;
                case 2: // POSITION_UNAVAILABLE
                    alert('Couldn\'t find you...');
                    break;
                case 3: // TIMEOUT
                    alert('The Geolocation request took too long and timed out');
                    break;
                default:
            }
        }
        // Draw blue circle on top of user's location
        function drawCircle(loc) {
            var radius = 100;
            var R = 6378137;
            var lat = (loc.latitude * Math.PI) / 180;
            var lon = (loc.longitude * Math.PI) / 180;
            var d = parseFloat(radius) / R;
            var locs = new Array();
            for (x = 0; x <= 360; x++) {
                var p = new Microsoft.Maps.Location();
                brng = x * Math.PI / 180;
                p.latitude = Math.asin(Math.sin(lat) * Math.cos(d) + Math.cos(lat) * Math.sin(d) * Math.cos(brng));
                p.longitude = ((lon + Math.atan2(Math.sin(brng) * Math.sin(d) * Math.cos(lat), Math.cos(d) - Math.sin(lat) * Math.sin(p.latitude))) * 180) / Math.PI;
                p.latitude = (p.latitude * 180) / Math.PI;
                locs.push(p);
            }
            return new Microsoft.Maps.Polygon(locs, { fillColor: new Microsoft.Maps.Color(125, 0, 0, 255), strokeColor: new Microsoft.Maps.Color(0, 0, 0, 255) });
        }
    </script>
<body>
<html>

Se você executar o código como está, sua localização será exibida com uma mensagem sobre credenciais inválidas, como mostrado na Figura 7. Para obter um resultado sem o texto de aviso (Figura 8), você precisa substituir YOUR_BING_MAPS_KEY por sua própria chave quando assinar uma conta de desenvolvedor em Bing Maps.

Dn144998.CE927F6209B1D33166C201294243CD51(pt-br,MSDN.10).png

Figura 7 - Demonstração de localização geográfica mapeando um local sem chave válida

Dn144998.B3ED37F2385ABA0504AA164A78A97BBF(pt-br,MSDN.10).png

Figura 8 - Demonstração de localização geográfica mapeando um local após a inserção de chave válida

Para outros exemplos de localização geográfica que mapeiam sua localização usando um PIN de push, visite o test-drive do IE ou participe de um Treinamento Web em HTML5.

Saiba mais sobre localização geográfica aqui:

A Microsoft está realizando uma pesquisa online para saber sua opinião sobre o site do MSDN. Se você optar por participar, a pesquisa online lhe será apresentada quando você sair do site do MSDN.

Deseja participar?
Mostrar:
© 2014 Microsoft