Uzyskaj lokalizację GPS z przeglądarki internetowej


164

Tworzę witrynę mobilną, mam tam zintegrowane Google Maps, muszę dynamicznie wypełniać pole „Od” w Mapach Google.

Czy można pobrać lokalizację GPS z przeglądarki internetowej i dynamicznie wypełnić ją w polu „Od” na Mapie Google?


2
Jakie telefony komórkowe zamierzasz wspierać?
Rowland Shaw

chcę obsługiwać wszystkie przeglądarki mobilne, ale i-phone ma wysoki priorytet
Ganesh

Lepiej byłoby napisać natywną aplikację, ponieważ pozwoli ona na ściślejszą integrację ze sprzętem tam, gdzie jest dostępna
Rowland Shaw,

16
jeśli potrzeba dotyczy tylko lokalizacji, natywna aplikacja jest ogromną przesadą. iOS nie jest jedynym urządzeniem mobilnym, to tylko priorytet.
Gonçalo Veiga

Odpowiedzi:


194

Jeśli korzystasz z interfejsu API geolokalizacji , byłoby to tak proste, jak użycie następującego kodu.

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

Możesz też mieć możliwość korzystania z interfejsu API lokalizacji klienta Google .

Ten problem został omówiony w artykule Czy można wykryć lokalizację GPS przeglądarki mobilnej? i Uzyskaj dane o pozycji z przeglądarki mobilnej . Więcej informacji znajdziesz tam.


Czy wspomniany interfejs API lokalizacji klienta Google jest nadal dostępny? Podany link prowadzi do Google Loader
Shane N,

1
Nie widzę tego na tej stronie jako jednego z dostępnych interfejsów API. - Możesz skorzystać z Google Latitude API: code.google.com/apis/latitude - Dzięki temu możliwe jest uzyskanie aktualnej lokalizacji klienta: code.google.com/apis/latitude/v1/…
dochoffiday

1
Dla przyszłych czytelników dokładność jest mierzona w metrach .
johnnyRose

Hyy, czy możemy automatycznie włączyć współdzielenie lokalizacji poprzez kodowanie
Mr. Tomar

2
Czy to wymaga użycia Twojej lokalizacji?
Jack

21

Aby udzielić bardziej szczegółowej odpowiedzi. HTML5 pozwala uzyskać współrzędne geograficzne i wykonuje całkiem niezłą robotę. Ogólnie rzecz biorąc, obsługa geolokalizacji przez przeglądarki jest całkiem dobra, wszystkie główne przeglądarki z wyjątkiem ie7 i ie8 (oraz opera mini). IE9 spełnia swoje zadanie, ale jest najgorszy. Zamówienie caniuse.com:

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

Potrzebujesz również zgody użytkownika, aby uzyskać dostęp do jego lokalizacji, więc upewnij się, że to sprawdzasz i podajesz przyzwoite instrukcje na wypadek, gdyby było wyłączone. Szczególnie w przypadku iPhone'a włączanie uprawnień dla Safari jest nieco uciążliwe.


dotnetcurry.com/aspnet-mvc/782/… to przydatne odniesienie do implementacji w środowisku mvc asp.net
Walter de Jong

13

Skorzystaj z tego, a wszystkie informacje znajdziesz pod adresem 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>

1
Uwaga: getCurrentPosition () i watchPosition () nie działają już na niezabezpieczonych źródłach. Aby skorzystać z tej funkcji, należy rozważyć przełączenie aplikacji do bezpiecznego źródła, takiego jak HTTPS.
user2589273

4

Istnieje API GeoLocation , ale obecnie obsługa przeglądarek jest raczej ograniczona. Większość serwisów, którym zależy na takich rzeczach, korzysta z bazy danych GeoIP (ze zwykłymi zastrzeżeniami co do niedokładności takiego systemu). Możesz również przyjrzeć się usługom stron trzecich wymagającym współpracy użytkownika, takim jak FireEagle .


1
bardzo dziękuję za szybką odpowiedź. jeśli to możliwe, czy możesz dać mi więcej wskazówek ...
Ganesh,

2

Zauważalny

/*
  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();
  }

1

Skorzystajmy z najnowszych funkcji grubych strzałek :

navigator.geolocation.getCurrentPosition((loc) => {
  console.log('The location in lat lon format is: [', loc.coords.latitude, ',', loc.coords.longitude, ']');
})
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.