ユーザーの場所をJavaScriptで取得する方法

この記事はもともと私のYouTubeチャンネルのビデオチュートリアルです.https://youtu.be/Xd43hZKaUS0
だからあなたのWebページやアプリケーションの現在のユーザーの場所を取得する必要があるとしましょう.
たぶん、あなたはそれらの場所(Googleの検索ページの下部にあるように)を表示するか、それらについてのコンテンツを調整する必要がある場所に応じている.
GeoLocation Web APIを使用してユーザーの現在位置を取得できます.

ゲル化API
でwindow ブラウザの中にオブジェクトがあるnavigator それは、それ自身と呼ばれる更なる特性を含むオブジェクトですgeolocation これは再び別のオブジェクトです.

if (window.navigator.geolocation) {
 // Geolocation available
} 

すべてのブラウザがGeoLocation Web APIをサポートしているわけではないので、if文でコードをラップする価値があるかもしれません
ブラウザーがそれをサポートするならば、あなたはGeoLocation APIからユーザーの位置を要求することができますgetCurrentPosition 関数.

window.navigator.geolocation
  .getCurrentPosition(console.log, console.log);

私は、ユーザーがあなたのウェブサイト/アプリの許可をあなたの場所を検索するためにしたいことを確認している'要求'と言う.

現在位置を取得する
GetCurrentPosition関数は2つの引数をとります.
これらは、成功したジオロケーション検索または失敗があるときに実行されるコールバック関数です.

getCurrentPosition(successCallback, failureCallback);

ユーザーが同意を与えるならば、ポップアップで受け入れをクリックすることによって、あなたはユーザーの経度と緯度値を持っている成功コールバックで、オブジェクトを取り戻すでしょう.
結果は以下のようになります.

{
  coords = { 
    latitude: 51.4554803,
    longitude: -2.0843058,
    altitude: null,
    accuracy: 49,
    altitudeAccuracy: null,
    heading: null,
    speed: null,
  },
  timestamp: 1583860898576
}

あなたが実際の場所にこれらを翻訳するジオコーディングサービスを使用する必要がありますので、これらは人間の読み取り可能な形式でユーザーの場所を識別するために探している場合、これらはあまり使用されていません.

ジオコーディング
いくつかのジオコーディングプロバイダがあります.チュートリアルでは、OpenCageDataを使用しました.COM(無料アカウントとAPIキー要求のために必要です)経度と緯度の値を翻訳する.
OpencageDataを使用している場合は、APIキーとアカウントキーを1回使用すると、このような関数を作成して成功コールバックに使用できます.

const successfulLookup = position => {
  const { latitude, longitude } = position.coords;
  fetch(`https://api.opencagedata.com/geocode/v1/json?q=${latitude}+${longitude}&key=1234`)
    .then(response => response.json();
    .then(console.log); // Or do whatever you want with the result

それから、あなたは単にそれをプラグインにすることができますgetCurrentPosition 関数.

window.navigator.geolocation
  .getCurrentPosition(successfulLookup, console.log);

あなたが返す応答は、添付のメタデータがたくさんあるが、そこにあるresults 位置の詳細がある1つのアイテムをちょうどあなたに与えるべき配列.
ユーザーの場所の'フォーマットされた'バージョンは以下からアクセスできます.

results[0].formatted; // Gives something like '54, My street, My Town, My Post Code, My Country

そして、あるcomponents プロパティは、結果の配列内の各項目の内側には、場所の各部分に直接アクセスできます.
楽しむ!
例を見たいなら、feel free to watch the tutorial for more details .