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?

Ganesh
źródło
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
1
github.com/onury/geolocator
Onur Yıldırım

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.

dochoffiday
źródło
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.

Bzdury
źródło
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>
Ema.H
źródło
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 .

Quentin
źródło
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();
  }
Robert King
źródło
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, ']');
})
Zameer
źródło