HTML Geolocation
Antes, Web Storage lembrava cadeias chave/valor. Esta lição deixa de guardar e apresenta Geolocation: ler latitude/longitude aproximadas com navigator.geolocation — só após permissão. O HTML carrega um script que pede localização. Âmbito prático — leitura única, watch/clear e recusa educada — não SDK de mapas nem geo BD.
Por que geolocation num curso HTML
Principiantes costumam fazer um botão «perto de mim». Geolocation é a primeira API habitual. Após web storage, a divisão é outra: HTML possui a casca e o botão; JS pede coordenadas. Bastam getCurrentPosition, conhecer watchPosition e tratar a recusa.
Resposta direta
1) Chame getCurrentPosition. 2) Leia latitude/longitude. 3) Melhor após um clique do utilizador. 4) watchPosition só para atualizações; clearWatch. 5) Nenhuma etiqueta HTML. 6) Se recusar, mantenha a página útil.
📊 getCurrentPosition vs watchPosition
| Topic | getCurrentPosition | watchPosition |
|---|---|---|
| Typical use | One-shot “where am I now” | Ongoing updates while watching |
| Callback pattern | success once (plus optional error) | success may fire repeatedly |
| Stop watching | Not needed (single read) | clearWatch(watchId) |
| Beginner fit | Share-location button | Live tracking demos (careful) |
| Permission | Still required | Still required |
| This course depth | Intro focus | Short demo + clearWatch only |
Mini demo getCurrentPosition
Um clique pede a posição e mostra coordenadas. Se a API faltar ou houver recusa, mensagem calma.
<button id="loc" type="button">Share location</button>
<pre id="out"></pre>
<script>
const out = document.getElementById("out");
document.getElementById("loc").onclick = function () {
if (!navigator.geolocation) {
out.textContent = "No geolocation support";
return;
}
out.textContent = "Waiting for permission…";
navigator.geolocation.getCurrentPosition(
function (pos) {
out.textContent =
pos.coords.latitude + ", " + pos.coords.longitude;
},
function () {
out.textContent = "Permission denied or unavailable";
}
);
};
</script>
Ler as chamadas getCurrentPosition
- navigator.geolocation é o ponto de entrada
- getCurrentPosition pergunta uma vez
- latitude/longitude são os primeiros números
- Detete suporte primeiro
- O erro cobre a recusa
- Prefira HTTPS
- Ao contrário de Web Storage: lê, não guarda
watchPosition para atualizações contínuas
O sucesso pode disparar ao mover. Guarde o id e use clearWatch — não deixe watches eternos na intro.
<button id="start" type="button">Watch location</button>
<button id="stop" type="button">Stop watching</button>
<pre id="live"></pre>
<script>
const live = document.getElementById("live");
let watchId = null;
document.getElementById("start").onclick = function () {
if (!navigator.geolocation) {
live.textContent = "No geolocation support";
return;
}
if (watchId !== null) {
return;
}
live.textContent = "Watching…";
watchId = navigator.geolocation.watchPosition(
function (pos) {
live.textContent =
pos.coords.latitude + ", " + pos.coords.longitude;
},
function () {
live.textContent = "Permission denied or unavailable";
watchId = null;
}
);
};
document.getElementById("stop").onclick = function () {
if (watchId !== null) {
navigator.geolocation.clearWatch(watchId);
watchId = null;
live.textContent = "Stopped watching";
}
};
</script>
Ler a ideia watchPosition
- Mesmo modelo de permissão
- O sucesso pode repetir
- clearWatch para — ofereça Stop
- Não é biblioteca de mapas
- Não é Web Storage
- Escolha get vs watch pela frequência
- A seguir: drag and drop
Quando perguntar
- Clique em «Partilhar localização»: bom momento
- Ao carregar sem contexto: costuma ser mau
- Movimento contínuo: watchPosition com paragem
- Guardar tema: foi Web Storage
- Produto de mapas completo: fora desta intro
- Seguimento silencioso: antipadrão
Prática — peça um fix com educação
- Cole a demo getCurrentPosition e teste o prompt.
- Confirme coordenadas ou mensagem calma.
- Teste watch e depois Stop.
- Opcional: recuse sem partir a página.
- Frase: Web Storage guarda cadeias; Geolocation lê com permissão.
- Sirva por http(s) se preciso.
- Antevisão: drag and drop.
Erros fáceis
- Esperar uma etiqueta geolocation
- Perguntar em cada carga
- Ignorar o callback de erro
- Confundir com Web Storage
- Deixar watch sem clearWatch
- Assumir GPS preciso sempre
- Tratar a intro como curso de mapas
Resumo
- Geolocation é uma API JS com permissão em navigator.geolocation
- getCurrentPosition uma vez; watchPosition + clearWatch para atualizações
- HTML dá a UI; pergunte após uma ação clara
- Trate a recusa com amabilidade
- Web Storage eram cadeias; esta lição coordenadas permitidas
- Seguinte: drag and drop em HTML
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo