Obter a localização do GPS no navegador da web

164

Estou desenvolvendo um site para celular, onde integrei o Google Maps, preciso preencher o campo 'De' do Google Maps dinamicamente.

É possível obter a localização GPS do navegador da web e preenchê-la no campo 'De' de um mapa do Google dinamicamente?

Ganesh
fonte
2
Quais celulares você pretende apoiar?
Rowland Shaw
Quero apoiar todos os navegadores móveis, mas i-phone é a alta prioridade
Ganesh
Você pode ser melhor escrever um aplicativo nativo, como ele vai permitir maior integração com o hardware, onde está disponível
Rowland Shaw
16
se a necessidade for apenas em relação à localização, um aplicativo nativo é um exagero. O iOS não é o único celular, é apenas uma prioridade.
Gonçalo Veiga
1
github.com/onury/geolocator
Onur Yıldırım

Respostas:

194

Se você usar a API de geolocalização , seria tão simples quanto usar o código a seguir.

navigator.geolocation.getCurrentPosition(function(location) {
  console.log(location.coords.latitude);
  console.log(location.coords.longitude);
  console.log(location.coords.accuracy);
});

Você também pode usar a API de localização do cliente do Google .

Este problema foi discutido em É possível detectar a localização GPS de um navegador móvel? e obter dados de posição de navegador móvel . Você pode encontrar mais informações lá.

dochoffiday
fonte
A API de localização do cliente do Google ainda é mencionada? O link fornecido vai para o Google Loader
Shane N
1
Não vejo essa página como uma das APIs disponíveis. - Você pode usar a API do Google Latitude: code.google.com/apis/latitude - Com isso, é possível obter a localização atual do cliente: code.google.com/apis/latitude/v1/…
dochoffiday
1
Para futuros leitores, a precisão é medida em metros .
johnnyRose
Hyy podemos facilitar a localização de partilha autmatically via de codificação
Mr. Tomar
2
Isso solicita o uso da sua localização?
Jack
21

Para dar uma resposta um pouco mais específica. O HTML5 permite que você obtenha as coordenadas geográficas e faz um trabalho bastante decente. No geral, o suporte ao navegador para geolocalização é muito bom, todos os principais navegadores, exceto ie7 e ie8 (e opera mini). O IE9 faz o trabalho, mas é o pior desempenho. Caixa caniuse.com:

http://caniuse.com/#search=geol

Além disso, você precisa da aprovação do usuário para acessar sua localização, portanto, verifique isso e dê algumas instruções decentes, caso esteja desativado. Especialmente para Iphone, ativar as permissões para o Safari é um pouco complicado.

Tosh
fonte
dotnetcurry.com/aspnet-mvc/782/... é uma referência útil para aplicação em asp.net mvc ambiente
Walter de Jong
13

Use isso e você encontrará todas as informações em http://www.w3schools.com/html/html5_geolocation.asp

<script>
var x = document.getElementById("demo");
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}
function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude; 
}
</script>
Ema.H
fonte
1
Apenas uma observação: getCurrentPosition () e watchPosition () não funcionam mais em origens inseguras. Para usar esse recurso, considere mudar seu aplicativo para uma origem segura, como HTTPS.
user2589273
4

Existe a API GeoLocation , mas o suporte ao navegador é bastante limitado no momento. A maioria dos sites que se preocupam com essas coisas usa um banco de dados GeoIP (com as condições usuais sobre a imprecisão desse sistema). Você também pode procurar serviços de terceiros que exijam cooperação do usuário, como o FireEagle .

Quentin
fonte
1
muito obrigado pela sua resposta rápida. se possível, você pode me dar mais algumas dicas ...
Ganesh
2

Observável

/*
  function geo_success(position) {
    do_something(position.coords.latitude, position.coords.longitude);
  }

  function geo_error() {
    alert("Sorry, no position available.");
  }

  var geo_options = {
    enableHighAccuracy: true,
    maximumAge        : 30000,
    timeout           : 27000
  };

  var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);
  */
  getLocation(): Observable<Position> {
    return Observable.create((observer) => {
      const watchID = navigator.geolocation.watchPosition((position: Position) => {
        observer.next(position);
      });
      return () => {
        navigator.geolocation.clearWatch(watchID);
      };
    });
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }
Robert King
fonte
1

Vamos usar as mais recentes funções de seta gorda :

navigator.geolocation.getCurrentPosition((loc) => {
  console.log('The location in lat lon format is: [', loc.coords.latitude, ',', loc.coords.longitude, ']');
})
Zameer
fonte