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.