ユーザーの場所情報の取得

今回の投稿は、ユーザーの位置を確認するため、グーグル検索で見つけたゼロ秒ブログの地理的位置の内容を実践し、整理したブログです.
詳細は原版ブログ記事をご覧ください.
ゼロ秒位置決め関連位置決め
なぜ位置情報が必要なのですか?

今回のクローンコードの過程で、ニンジンスーパーをクローンすることにした.ニンジンスーパーは団地の中古商品取引プラットフォームに基づいて、登録画面に自分の住んでいる団地を印刷することができる.
フロントでできる方法はありますか?
ランダムグーグル化の結果、navigatorオブジェクト上でgeocationプロパティを使用すると、接続されたクライアント側の位置情報が得られることが分かった.
さっそくテストしてみましょう.

function getLocation() {
  if (navigator.geolocation) { // GPS를 지원하면
    navigator.geolocation.getCurrentPosition(function(position) {
      alert(position.coords.latitude + ' ' + position.coords.longitude);
    }, function(error) {
      console.error(error);
    }, {
      enableHighAccuracy: false,
      maximumAge: 0,
      timeout: Infinity
    });
  } else {
    alert('GPS를 지원하지 않습니다');
  }
}
getLocation();

コードソース:https://www.zerocho.com/category/HTML&DOM/post/59155228a22a5d001827ea5d
上記のコードを貼り付けてブラウザでテストする
地理的オブジェクトのgetCurrentPositionメソッドを使用すると、現在の位置の情報を取得できます.もちろん、これらの場所情報を提供するために、ブラウザはユーザーに権限の許可された確認ウィンドウを提供します.


アクセス権を取得すると、次のようにコンソールウィンドウで座標情報を表示できます.
各情報

精度:精度

高さ:

高さ

緯度:緯度

経度

:経度

速度:速度

背中から出る.
getCurrentPositionメソッドでは、他のパラメータ値も使用できます.

navigator.geolocation.getCurrentPosition(function(position, errCallback, options) {
	//...
}

2番目のパラメータは、位置値の検索エラー時のコールバック関数を指定します.
3番目のパラメータでは、オプション値を指定できます.

{
	enableHighAccuracy <- 배터리를 더 소모해서 더 정확한 위치를 찾기
    	timeout <- 주어진 초 안에서 찾지 못하면 에러
        maximumAge <- 한번 찾은 위치 정보를 해당 초만큼 캐싱
}

この位置情報には、移動するたびに現在の位置を再通知するwatchPositionメソッドもあります.次のコードを追加します.

var watchId = navigator.geolocation.watchPosition(function(position) {
  console.log(position.coords);
});

位置情報は一定時間ごとに再出力されます.
この方法はノートパソコンや携帯電話のバッテリーをたくさん消費します.
ユーザーがオン・オフできる機能を提供できれば良いのですが.
この方法を解除する方法はcleartimeoutのようにclearWatchでよい.

navigator.geolocation.clearWatch(watchId)

(重要)Chromeではhttpsやlocalhostでしか運行していないそうですが、これは個人情報やセキュリティを守るためにやっているようなので、それを認識しておく必要があります.
では、調べた位置情報からどの団地なのかどうやって知っていますか?
地図APIでアドレスを取得できるので、KACA地図APIで見た結果、以下のガイドで実現できます.
https://apis.map.kakao.com/web/sample/coord2addr/
その他の考慮事項は?

chrome上でhttpsまたはlocalhostを実行するポイントのみ
この部分は今どのように解決すべきか思い出せない.
もっと知りたい

実際の緯度を入力しましたが、私の位置と誤差の点が発生します.
getCurrentPositionメソッドでより正確に位置決めするにはenableHighAccuracy optionsを設定しますが、optionsパラメータの使用方法を探してください.