Geolocalização com Consentimento

Localização é contexto, não invasão

A Geolocation API permite solicitar a posição aproximada do usuário pelo navegador. Ela pode alimentar mapas, lojas próximas, entregas, clima, transporte, check-in, localização de serviços e experiências personalizadas.

• Localização manual: usuário digita CEP, cidade ou endereço.
• Localização via navegador: o navegador solicita consentimento e entrega coordenadas ao JavaScript.

navigator.geolocation e getCurrentPosition

Geolocalização não é uma tag HTML visual. É uma API JavaScript do navegador. O ponto de entrada é navigator.geolocation. O método principal é getCurrentPosition().

if ("geolocation" in navigator) {
  navigator.geolocation.getCurrentPosition(sucesso, erro);
} else {
  console.log("Geolocalização não suportada neste navegador.");
}

function sucesso(position) {
  const lat = position.coords.latitude;
  const lon = position.coords.longitude;
  const accuracy = position.coords.accuracy;

  console.log(`Latitude: ${lat}, Longitude: ${lon}`);
  console.log(`Precisão aproximada: ${accuracy} metros`);
}

function erro(error) {
  if (error.code === 1) {
    alert("Permissão negada. Você pode informar seu CEP manualmente.");
  } else if (error.code === 2) {
    alert("Localização indisponível no momento.");
  } else if (error.code === 3) {
    alert("Tempo de busca excedido. Tente novamente.");
  }
}

Latitude, longitude, accuracy, altitude, heading, speed e timestamp

O objeto position contém coords e timestamp. O Mestre não promete precisão absoluta: ele lê a margem de erro em metros e explica o limite técnico.

const lat = position.coords.latitude;
const lon = position.coords.longitude;
const accuracy = position.coords.accuracy;
const altitude = position.coords.altitude;
const heading = position.coords.heading;
const speed = position.coords.speed;
const capturadoEm = new Date(position.timestamp);

document.querySelector("#resultado").textContent =
  `Latitude: ${lat}, Longitude: ${lon}, precisão: ${accuracy}m`;

Opções, watchPosition, clearWatch, bateria e UX

getCurrentPosition captura uma foto instantânea. watchPosition acompanha mudanças ao longo do tempo. Todo rastreamento precisa de botão para parar.

const opcoes = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 60000
};

navigator.geolocation.getCurrentPosition(sucesso, erro, opcoes);

let watchID;

function iniciarRastreamento() {
  watchID = navigator.geolocation.watchPosition(sucesso, erro, opcoes);
}

function pararRastreamento() {
  if (watchID) {
    navigator.geolocation.clearWatch(watchID);
    watchID = null;
  }
}

• enableHighAccuracy: pede maior precisão, mas consome mais bateria.
• timeout: tempo máximo de espera.
• maximumAge: aceita posição em cache por determinado tempo.
• watchPosition: rastreamento contínuo.
• clearWatch: interrompe rastreamento.

Transparência antes da permissão

O pedido do navegador nunca deve ser surpresa. Antes de chamar a API, explique por que você precisa da localização, qual benefício será entregue e que o usuário pode negar.

• Explique o motivo antes do pedido.
• Peça localização apenas após ação do usuário.
• Ofereça alternativa manual com cidade ou CEP.
• Não bloqueie o site se o usuário negar.
• Não armazene coordenadas sem aviso e consentimento.
• Não peça alta precisão se cidade ou bairro bastam.
• Informe que a permissão é opcional.
• Use HTTPS em projetos reais.

15 perguntas para provar domínio

1. Qual objeto contém a API? navigator.geolocation.
2. Qual método pega a posição uma única vez? getCurrentPosition.
3. Qual método rastreia movimento? watchPosition.
4. Como parar rastreamento? clearWatch(id).
5. O usuário precisa permitir acesso? Sim.
6. O que é latitude? Posição norte-sul.
7. O que é longitude? Posição leste-oeste.
8. O que accuracy informa? Precisão em metros.
9. A API funciona em HTTP comum? Não em contexto real seguro; exige HTTPS ou localhost.
10. O que é timestamp? Momento da captura da posição.
11. Qual opção ativa alta precisão? enableHighAccuracy: true.
12. O que timeout faz? Define tempo máximo de espera.
13. O que maximumAge faz? Aceita posição em cache por certo tempo.
14. Geolocalização é HTML ou JS? É uma API JavaScript do navegador.
15. A precisão é sempre igual? Não, depende da fonte de localização.

Registre sua página de geolocalização

git status
git add .
git commit -m "aula-36: cria pagina de geolocalizacao com consentimento"
git push

• git status: verifica a criação do desafio.
• git add .: prepara o arquivo.
• git commit: documenta o domínio da API.
• git push: envia para seu portfólio remoto.