Warning: Undefined array key "steps" in /home/bubudoufu/bubudoufu.com/public_html/wp-content/plugins/amp/src/ReaderThemeSupportFeatures.php on line 501
javascriptで位置情報を取得し、グルメリサーチAPIを利用して周辺の飲食店を取得してみる - プログラミングを学習中の私が、アウトプットするためのサイト
サイトアイコン プログラミングを学習中の私が、アウトプットするためのサイト

javascriptで位置情報を取得し、グルメリサーチAPIを利用して周辺の飲食店を取得してみる

このページではソースコードの一部分を簡単な解説をしています。

作成したページはコチラから
ソースコードはgithubにあります

スポンサーリンク

概要

javascriptのGeolocationAPIで位置情報を取得し、グルメリサーチAPIを利用して周辺の飲食店を取得、現在地から距離の近い順に表示するアプリです。

位置情報を取得する

まず初めに<strong>navigator.geolocation</strong>を使いブラウザがGeolocation APIに対応しているかをチェックし、対応している場合はnavigator.geolocation.getCurrentPosition(success, error)で位置情報を取得します。<strong>getCurrentPosition</strong>メソッドの第一引数には位置情報の取得成功時に実行されるコールバック関数をセットし、第二引数には取得失敗時に実行されるコールバック関数をセットします。取得が成功した場合は24行目のsuccess関数が実行され、座標などグルメサーチAPIリクエスト時必要なパラメーターをまとめ、FetchApiを使いリクエストしています。

グルメサーチAPIからjsonを取得する

今回はPHPを使ってグルメリサーチAPIへリクエストしました。 グルメサーチAPIリクエスト時必須パラメーターは二つあり、APIキーと店名、住所、駅名などのキーワードか座標が必要になります。APIキーはコチラから取得できます。

グルメリサーチAPIを使用する際の注意点

グルメリサーチAPIで提供されているURLはすべてhttp:になっているので https: に直す必要があります。 https: に直さないと混在コンテンツとなり、位置情報は取得できません。

最後までお読みいただきありがとうございました。

モバイルバージョンを終了