Holen Sie sich den GPS-Standort über den Webbrowser

164

Ich entwickle eine mobile Website. Dort habe ich Google Maps integriert. Ich muss das Feld "Von" von Google Maps dynamisch ausfüllen.

Ist es möglich, den GPS-Standort über den Webbrowser abzurufen und dynamisch in das Feld "Von" einer Google Map einzufügen?

Ganesh
quelle
2
Welche Handys möchten Sie unterstützen?
Rowland Shaw
Ich möchte alle mobilen Browser unterstützen, aber i-phone hat die hohe Priorität
Ganesh
Sie sind möglicherweise besser dran, eine native App zu schreiben, da sie eine engere Integration in die Hardware ermöglicht, sofern verfügbar
Rowland Shaw,
16
Wenn die Notwendigkeit nur in Bezug auf den Standort besteht, ist eine native App enorm übertrieben. iOS ist nicht das einzige Handy, es hat nur Priorität.
Gonçalo Veiga
1
github.com/onury/geolocator
Onur Yıldırım

Antworten:

194

Wenn Sie die Geolocation-API verwenden , ist dies so einfach wie die Verwendung des folgenden Codes.

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

Möglicherweise können Sie auch die Client Location API von Google verwenden .

Dieses Problem wurde unter Ist es möglich, den GPS-Standort eines mobilen Browsers zu erkennen? und Positionsdaten vom mobilen Browser abrufen . Dort finden Sie weitere Informationen.

dochoffiday
quelle
Wird die Google Client Location API noch erwähnt? Der bereitgestellte Link geht zu Google Loader
Shane N
1
Ich sehe es auf dieser Seite nicht als eine der verfügbaren APIs. - Möglicherweise können Sie die Google Latitude-API verwenden: code.google.com/apis/latitude - Mit dieser Option können Sie den aktuellen Standort des Kunden
abrufen
1
Für zukünftige Leser wird die Genauigkeit in Metern gemessen .
Johnny Rose
Hyy können wir den Freigabestandort automatisch durch Codierung aktivieren
Herr Tomar
2
Fordert dies die Nutzung Ihres Standorts an?
Jack
21

Um eine etwas genauere Antwort zu geben. Mit HTML5 können Sie die Geokoordinaten abrufen, und es macht einen ziemlich anständigen Job. Insgesamt ist die Browserunterstützung für die Geolokalisierung ziemlich gut, alle gängigen Browser außer ie7 und ie8 (und Opera Mini). IE9 macht den Job, ist aber der schlechteste Performer. Kasse caniuse.com:

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

Außerdem benötigen Sie die Genehmigung Ihres Benutzers, um auf dessen Standort zugreifen zu können. Überprüfen Sie dies daher und geben Sie einige anständige Anweisungen, falls dieser deaktiviert ist. Besonders für das iPhone ist das Aktivieren von Berechtigungen für Safari etwas umständlich.

Tosh
quelle
dotnetcurry.com/aspnet-mvc/782/… ist eine praktische Referenz für die Implementierung in der asp.net mvc-Umgebung
Walter de Jong
13

Verwenden Sie diese Option. Alle Informationen finden Sie unter 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
quelle
1
Nur eine Anmerkung: getCurrentPosition () und watchPosition () funktionieren nicht mehr bei unsicheren Ursprüngen. Um diese Funktion nutzen zu können, sollten Sie in Betracht ziehen, Ihre Anwendung auf einen sicheren Ursprung wie HTTPS umzustellen.
user2589273
4

Es gibt die GeoLocation-API , aber die Browserunterstützung ist derzeit eher dürftig . Die meisten Websites, die sich für solche Dinge interessieren, verwenden eine GeoIP-Datenbank (mit den üblichen Vorbehalten bezüglich der Ungenauigkeit eines solchen Systems). Sie können sich auch Dienste von Drittanbietern ansehen, die eine Zusammenarbeit der Benutzer erfordern, z. B. FireEagle .

QUentin
quelle
1
Vielen Dank für Ihre schnelle Antwort. Wenn möglich, können Sie mir noch ein paar Tipps geben ...
Ganesh
2

Beobachtbar

/*
  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
quelle
1

Verwenden wir die neuesten Fettpfeilfunktionen :

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