web-dev-qa-db-ja.com

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

私はモバイルベースのウェブサイトを開発しています、そこで私はグーグルマップを統合しました、私はダイナミックにグーグルマップの '差出人'フィールドを埋める必要があります。

WebブラウザからGPSの位置を取得し、Google Mapの[From]フィールドに動的に入力することはできますか。

javascriptmobilegeolocation
153
Ganesh

Geolocation 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位置を検出することはできますか？ and モバイルブラウザから位置データを取得する で説明されています。もっと情報があります。

186
dochoffiday

ディスカッションを見る ブラウザでGPS座標を取得する方法

モバイルデバイスで動作するサンプルアプリケーション Where are I？ へのリンクがあります。私は自分のAndroid上でそれをテストし、現在の座標を取得するためにGPSモジュールを起動しました。あなたは生きている例の源を分析することができます。

携帯からすばやくアクセスできるようにQRコードを作成しました。

Where Am I QR code

45
Danubian Sailor

もう少し具体的な答えを出す。 HTML5はあなたが地理座標を得ることを可能にします、そしてそれはかなりまともな仕事をします。全体的な位置情報のブラウザサポートはかなり良いです、ie7とie8（そしてopera mini）を除くすべての主要なブラウザ。 IE9はその仕事をしますが、最も悪い実行者です。チェックアウトcaniuse.com：

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

また、あなたは彼らの場所にアクセスするためにあなたのユーザーの承認を必要とします、それであなたはこれをチェックしてそれがオフになった場合には適切な指示を与えることを確認してください特にIphoneにとってSafariの許可をオンにするのは少し面倒です。

21
Tosh

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

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

4
Quentin

最新の 太い矢印関数 を使ってみましょう。

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

観測できる

/*
  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
robert king