Holen Sie sich den GPS-Standort über den Webbrowser

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?

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.

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.

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>

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 .

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

Verwenden wir die neuesten Fettpfeilfunktionen :

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