WebブラウザーからGPS位置を取得する

私はモバイルベースのWebサイトを開発しています。そこでGoogleマップを統合しました。Googleマップの「From」フィールドに動的に入力する必要があります。

WebブラウザーからGPSの位置を取得し、Googleマップの「From」フィールドに動的に入力することはできますか？

あなたが使用している場合はジオロケーションAPIを、それが次のコードを使用するなど、単純なようになります。

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

また、GoogleのClient Location APIを使用できる場合もあります。

この問題については、モバイルブラウザのGPS位置を検出することは可能ですか？で説明されています。モバイルブラウザから位置データを取得します。あなたはそこでより多くの情報を見つけることができます。

もう少し具体的な答えを出すため。HTML5を使用すると、地理座標を取得できます。HTML5を使用すると、かなりまともな仕事ができます。全体的に、ジオロケーションのブラウザーサポートはかなり良好です。ie7とie8（およびopera mini）を除くすべての主要ブラウザー。IE9はその仕事をしますが、最悪のパフォーマンスです。チェックアウトcaniuse.com：

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

また、ユーザーの位置情報にアクセスするにはユーザーの承認が必要なので、これを確認し、オフになっている場合に備えて適切な指示を行ってください。特にIphoneの場合、Safariの権限をオンにするのは少し面倒です。

これを使用すると、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>

GeoLocation APIがありますが、ブラウザのサポートは現在のところかなり薄いです。そのようなことを気にするほとんどのサイトは、GeoIPデータベースを使用します（そのようなシステムの不正確さに関する通常の条件付き）。また、FireEagleなど、ユーザーの協力が必要なサードパーティのサービスも確認できます。

観察可能

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

最新のファットアロー関数を使用してみましょう。

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