Aprenda como obter a localização do usuário com JavaScript! Com um código simples, você conseguirá obter a geolocalização com JavaScript.
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Na aula de hoje, quero te mostrar como obter a localização do usuário com JavaScript! Certamente, você já se deparou com aquelas mensagens em páginas da internet, perguntando se você deseja compartilhar sua localização, não é mesmo?
É exatamente isso que vamos construir hoje: um código simples, mas eficiente para obter a geolocalização com JavaScript.
A ideia é conseguir localizar o usuário usando JavaScript. Ressalto que isso só funcionará em páginas https, ou seja, em páginas seguras. Além disso, será necessário que o usuário autorize a coleta desses dados de localização.
Quer aprender como obter a localização do usuário em JavaScript? Então, vem comigo!
Toda nossa implementação se baseará em uma funcionalidade nativa do navegador: a geolocalização.
Para acessar essa funcionalidade, é necessário criar um objeto Navigator, que contém um campo chamado geolocation. Esse campo, por sua vez, é um objeto que oferece diversas funcionalidades relacionadas à geolocalização.
Dentro dessas funcionalidades, destacamos a função getCurrentPosition, que possibilita a obtenção da posição atual do usuário.
navigator.geolocation.getCurrentPosition()Ao utilizar essa função, é necessário passar duas outras funções como parâmetros: a successCallback, que trata o sucesso da obtenção da localização, e a errorCallback, que lida com possíveis erros.
Como vimos, é necessário definir duas funções de Callback para lidar com o sucesso e o erro na obtenção da localização do usuário.
A função successCallback será executada quando a localização for obtida com êxito, enquanto a errorCallback entrará em ação quando não for possível obter a localização.
Começaremos criando a função para tratar o sucesso na obtenção da localização. Essa função sempre receberá um objeto contendo as informações de geolocalização do usuário, que é a resposta da função getCurrentPosition().
Vamos usar a informação desse objeto para exibir no console a localização obtida.
function posicaoObtidaComSucesso(geolocalizacao){
console.log(geolocalizacao);
}Quanto à função de erro, faremos algo semelhante. Esta função receberá um objeto de erro que descreverá o problema encontrado. Da mesma forma, vamos exibir essa informação no console.
function posicaoNaoPodeSerObtida(erro) {
console.error(erro)
}Ao invés de utilizar o console.log() para exibir o erro, usaremos o console.error(), pois essa função destaca o erro em vermelho.
Agora, podemos passar essas duas funções criadas como parâmetros para a função getCurrentPosition.
navigator.geolocation.getCurrentPosition(posicaoObtidaComSucesso, posicaoNaoPodeSerObtida);Antes de testarmos nossa função de geolocalização, é crucial entender a importância da comunicação segura via HTTPS.
Páginas sérias e profissionais adotam uma comunicação segura (https) ao acessar e trocar informações com o usuário. A presença de “https” no início do endereço indica essa segurança.
Essa medida é essencial, pois as informações utilizadas e trocadas são criptografadas, garantindo a proteção dos dados. É fundamental utilizar uma página segura ao executar o código para obter a localização do usuário.
Caso a comunicação não seja segura o navegador não te permitirá obter as informações do usuário. Pois isso iria deixar as informações do usuário expostas.
Se você deseja implementar essa funcionalidade em seu próprio sistema para obter a localização do usuário com JavaScript, você precisa se certificar de utilizar a comunicação HTTPS, assim como o portal da Hashtag utiliza.
Como o site da Hashtag está na pegada da comunicação segura, dá pra usar essa base pra testar nosso código e buscar a localização do usuário com JavaScript.
Para isso, na página da Hashtag, basta apertar o F12, abrir as ferramentas de desenvolvedor no navegador e ir na aba Console pra digitar nosso código.
Primeiro, adicionamos nossa função de Sucesso e pressionamos Enter.
Em seguida, fazemos o mesmo para a função de Erro.
Com as duas funções registradas, podemos criar nosso objeto navigator, como havíamos visto antes, para obter a localização do usuário.
Repare que, assim que você executar o código, o navegador abrirá uma caixa informando que a página atual deseja acessar sua localização e pergunta se você permite ou não esse acesso. Isso é fundamental; o usuário sempre precisará permitir o acesso à sua localização.
Caso você permita, dentro da ferramenta de desenvolvedor, poderá ver o objeto de geolocalização com as coordenadas da localização do usuário.
Caso o usuário recuse fornecer essas informações, cairemos na mensagem de erro.
A geolocalização é um recurso crucial e amplamente utilizado em diversos sistemas, como e-commerces (Mercado Livre, Magazine Luiza, etc.) e aplicativos de entrega, como iFood, Rappi, entre outros.
Esses sistemas conseguem identificar a localização do usuário para proporcionar serviços personalizados com base nela, enviando mensagens contendo informações e ofertas relevantes aos usuários de acordo com sua localidade atual.
Com o código apresentado nessa aula, você aprendeu como obter a localização do usuário com JavaScript. Contudo, é importante ressaltar que isso só é possível em uma comunicação segura. Agora, você está pronto para implementar essa funcionalidade nos seus próprios projetos!
Para acessar publicações de JavaScript, clique aqui!
Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.
Quer sair do zero no Python e virar uma referência na sua empresa? Inscreva-se agora mesmo no Python Impressionador