sugulogの日記

JavaScriptの位置情報。Geolocationを使用し位置情報を取得しよう。

スポンサードリンク

f:id:sugulog:20211228235458p:plainこんにちは、すぐるです!

sugulogをお読みいただきありがとうございます!!

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準に書いています。

少しでもお役に立てれば幸いです。

 

今回は、Geolocationを使用し位置情報を取得しようということで

について簡単に解説します!!

その為このブログを読むことで、JavaScriptの位置情報について理解できるのはもちろん、Geolocationを使用し位置情報を取得できるようになります。

是非最後までご愛読ください。

 

今回は、

・位置情報を取得しよう

の順で解説していきます。

では早速、みていきましょう!!

・位置情報を取得しよう

JavaScriptで位置情報を取得する際はnavigatorオブジェクトのgeolocation.getCurrentPosition()を使用します。

f:id:sugulog:20211228225424p:plain

第一引数には位置情報取得成功時の関数を定義し、第二引数には位置情報取得失敗時の関数を定義します。

またnavigator.geolocation.getCurrentPosition()が読み込まれるとブラウザでは以下のように位置情報の許可を求めます。

f:id:sugulog:20211228225541p:plain

今回は位置情報取得成功時の関数をgetPosition()として定義し、位置情報取得失敗時の関数をerrorPosition()として定義しました。

位置情報取得成功時の関数は引数を受け取ることが可能です。

今回はgetPosition()の引数でpositionとして受け取っています。

このpositionには以下のようにGeolocationPositionオブジェクトが格納されます。

f:id:sugulog:20211228225554p:plain

そしてGeolocationPosition.coordsの中のlatitudeに緯度、longitudeに経度、accuracyに取得位置情報の誤差範囲の情報を保持しています。

accuracyの取得位置情報の誤差範囲とは取得した情報から実際の位置が半径○m以内であることを表す値のことです。

そのため各値にアクセスすることで位置情報を取得することが可能となります。

また位置情報取得失敗時の関数であるerrorPosition()の処理としてはalert()でエラー文言を表示しています。

 

以上、今回のブログでした。

JavaScriptの位置情報について理解でき、Geolocationを使用し位置情報を取得できるようになりましたか??

位置情報の取得はGoogle Maps API等でも必須の技術です。

確実に自分の技術にしていきましょう。

今回のToDo

Geolocationを使用し現在の位置情報を取得してみましょう(≧∀≦)/

 

最後に!!

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度読者登録お願いします!

最後までご愛読いただきありがとうございました!!