Resumo : neste tutorial, você aprenderá como usar a API de geolocalização para permitir que aplicativos da web acessem sua localização assim que você concordar em compartilhar.
O que é API de geolocalização
A API de geolocalização permite que o aplicativo da web acesse sua localização se você concordar em compartilhá-la.
Por que API de geolocalização
A API de geolocalização é útil para aplicativos da web que precisam funcionar com base nas localizações do usuário, como mecanismos de pesquisa, sites de comércio eletrônico, mapas e aplicativos meteorológicos.
Por exemplo, um site de comércio eletrônico pode solicitar que você compartilhe sua localização. Depois de obter as informações, ele poderá mostrar a disponibilidade do produto, bem como preços e descontos de acordo com sua localização.
Da mesma forma, o mecanismo de pesquisa como o Google.com pode retornar resultados de pesquisa local com base no termo de pesquisa e na localização.
Por exemplo, se você estiver em São Francisco e pesquisar Pizza, o Google mostrará uma lista de pizzarias próximas à sua localização atual.
O objeto de geolocalização
A API de geolocalização está disponível através do navigator.geolocationobjeto.
Verifique se a API de geolocalização é compatível
Para verificar se um navegador suporta isso, você pode testar se a geolocationpropriedade existe no objeto navegador assim:
if (!navigator.geolocation) {
console.error(`Your browser doesn't support Geolocation`);
}
Linguagem de código: JavaScript ( javascript )Obtenha a posição atual
Para obter a localização atual do usuário, você chama o getCurrentPosition()método do navigator.geolocationobjeto.
O getCurrentPosition()método envia uma solicitação assíncrona para detectar a localização do usuário e consulta o hardware de posicionamento (como GPS) para obter os dados atualizados.
O getCurrentPosition()pode ter sucesso ou falhar. Ele aceita dois retornos de chamada opcionais que serão executados em cada caso, respectivamente.
Se for getCurrentPosition()bem-sucedido, você obterá a posição do usuário como um GeolocationCoordinates objeto.
O GeolocationCoordinatesobjeto possui as propriedades latitudee longitudeque representam um local.
Exemplo de geolocalização JavaScript
O exemplo a seguir mostra um aplicativo simples que possui um botão . Ao clicar no botão, o navegador solicitará que você compartilhe sua localização. Se você concordar, mostrará sua latitude e longitude atuais.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Geolocation Demo</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<button id="show" class="btn">Show my location</button>
<div id="message"></div>
</div>
<script src="js/app.js"></script>
</body>
</html>Linguagem de código: HTML, XML ( xml )E o seguinte mostra o arquivo app.js:
(() => {
const message = document.querySelector('#message');
// check if the Geolocation API is supported
if (!navigator.geolocation) {
message.textContent = `Your browser doesn't support Geolocation`;
message.classList.add('error');
return;
}
// handle click event
const btn = document.querySelector('#show');
btn.addEventListener('click', function () {
// get the current position
navigator.geolocation.getCurrentPosition(onSuccess, onError);
});
// handle success case
function onSuccess(position) {
const {
latitude,
longitude
} = position.coords;
message.classList.add('success');
message.textContent = `Your location: (${latitude},${longitude})`;
}
// handle error case
function onError() {
message.classList.add('error');
message.textContent = `Failed to get your location!`;
}
})();Linguagem de código: JavaScript ( javascript )Como funciona.
Primeiro, selecione o #messageelemento usando o querySelector()método.
A seguir, mostre uma mensagem de erro se o navegador não suportar a API de geolocalização.
Em seguida, selecione o botão e anexe um manipulador de eventos de clique. O manipulador de eventos click chama o getCurrentPosition()método do navigator.geolocationobjeto para obter a posição atual do usuário.
As funções onSuccesse onErrorcallback servem para lidar com casos de sucesso e erro.
Depois disso, defina a onSuccess()função que obtém a latitude e longitude de position.coordse as mostra no <div>elemento com id message.
Por fim, defina a onError()função que mostra uma mensagem de erro caso o getCurrentPosition()método falhe.
Observe que todo o código em app.js está agrupado em um IIFE .
Teste o aplicativo
A seguir ilustra como executar o aplicativo da web usando o Google Chrome. Se estiver usando um navegador diferente, como Firefox, Edge ou Safari, você poderá seguir as etapas.
Ao clicar no botão Mostrar minha localização , o navegador solicitará que você compartilhe sua localização assim:
Se você clicar no botão Permitir , verá sua localização conforme mostrado na imagem a seguir:
Observe que sua localização pode ser diferente.
Para alterar a configuração do navegador, clique no ícone de localização e no botão Gerenciar :
Irá mostrar uma tela como esta:
Se você clicar no ícone da Lixeira , o site permitido será removido.
E se você atualizar o aplicativo e clicar no botão Mostrar minha localização , ele solicitará que você compartilhe sua localização novamente.
Desta vez, se você clicar no botão Bloquear :
…o aplicativo mostrará uma mensagem de erro:
Resumo
- A API de geolocalização permite que aplicações web acessem a posição atual do usuário.
- Use o
navigator.geolocation.getCurrentPosition()método para obter a localização do usuário atual.
