Geolocalização com HTML5

A geolocalização em HTML5 é usada para determinar a localização do usuário. A localização pode ser obtida de várias fontes, incluindo:

Endereço IP
Sistema de Posicionamento Global (GPS)
Rede Wi-Fi
Localização baseada em celular

1. Endereço IP

O método de geolocalização por endereço IP geralmente não é muito preciso, pois ele busca o endereço físico registrado ao IP, que pode estar a quilômetros de distância do usuário real.

2. Sistema de Posicionamento Global (GPS)

O GPS fornece uma localização precisa quando há visão clara do céu, mas pode demorar mais para obter a posição, tornando-o menos adequado para aplicações que requerem respostas rápidas.

3. Rede Wi-Fi

A geolocalização baseada em Wi-Fi calcula a posição do usuário através da triangulação com pontos de acesso conhecidos. É bastante precisa em ambientes internos, mas menos eficaz em áreas rurais com poucos pontos de acesso.

4. Localização baseada em celular

A localização baseada em celular usa a triangulação com torres de tellefonia móvel. Geralmente, este método combina informações de Wi-Fi e GPS para maior precisão.

API de Geolocalização

A API navigator.geolocation permite solicitar a localização do usuário. As funções principais são:

getCurrentPosition: Solicita a localização atual do usuário.
watchPosition: Monitora as mudanças na localização do usuário.

1. Solicitação única: getCurrentPosition

Parâmetros:

successCallback: Função chamada se a solicitação for bem-sucedida.
errorCallback: Função chamada se ocorrer um erro.
options: Configurações opcionais como precisão, tempo limite e cache.

Exemplo de uso:


navigator.geolocation.getCurrentPosition(
  function(position) {
    console.log("Latitude: " + position.coords.latitude);
    console.log("Longitude: " + position.coords.longitude);
    // Outros detalhes
  },
  function(error) {
    switch(error.code) {
      case error.PERMISSION_DENIED:
        alert("Permissão negada.");
        break;
      case error.POSITION_UNAVAILABLE:
        alert("Posição indisponível.");
        break;
      case error.TIMEOUT:
        alert("Tempo esgotado.");
        break;
      default:
        alert("Erro desconhecido.");
        break;
    }
  },
  { enableHighAccuracy: true, timeout: 10000, maximumAge: 0 }
);

2. Solicitação contínua: watchPosition

Parâmetros:

successCallback: Função chamada sempre que a localização muda.
errorCallback: Função chamada se ocorrer um erro.
options: Configurações opcionais como precisão, tempo limite e cache.

Exemplo de uso:


var watchId = navigator.geolocation.watchPosition(
  function(position) {
    console.log("Latitude: " + position.coords.latitude);
    console.log("Longitude: " + position.coords.longitude);
    // Outros detalhes
  },
  function(error) {
    switch(error.code) {
      case error.PERMISSION_DENIED:
        alert("Permissão negada.");
        break;
      case error.POSITION_UNAVAILABLE:
        alert("Posição indisponível.");
        break;
      case error.TIMEOUT:
        alert("Tempo esgotado.");
        break;
      default:
        alert("Erro desconhecido.");
        break;
    }
  },
  { enableHighAccuracy: true, timeout: 10000, maximumAge: 0 }
);

// Para parar a monitorização
navigator.geolocation.clearWatch(watchId);

Integração com o Baidu Maps

Para integrar a geolocalização com o Baidu Maps, você pode usar a API do Baidu Maps para exibir a localização do usuário em um mapa. Abaixo está um exemplo de como fazer isso:


<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <style type="text/css">
    body, html, #allmap { width: 100%; height: 100%; overflow: hidden; margin: 0; font-family: "微软雅黑"; }
  </style>
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=44R7nksmLBjTE1fkdlXGd0VU"></script>
  <title>Mapa</title>
</head>
<body>
  <input type="button" value="Solicitar" id="btn" style="width: 100%; height: 100px;">
  <div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
  var btn = document.getElementById("btn");
  btn.onclick = function() {
    navigator.geolocation.getCurrentPosition(
      function(position) {
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;

        var map = new BMap.Map("allmap");
        map.centerAndZoom(new BMap.Point(longitude, latitude), 11);
        map.addControl(new BMap.MapTypeControl());
        map.enableScrollWheelZoom(true);
      },
      function(error) {
        switch(error.code) {
          case 1:
            alert("Permissão negada.");
            break;
          case 2:
            alert("Posição indisponível.");
            break;
          case 3:
            alert("Tempo esgotado.");
            break;
          default:
            alert("Erro desconhecido.");
            break;
        }
      },
      { enableHighAccuracy: true, timeout: 99999999, maximumAge: 9999999999 }
    );
  }
</script>

Tags: html5 Geolocation Baidu Maps javascript Web Development

Publicado em 8-23 21:47

Doido Dev