PhoneGap Buildで作るGPSを使ったスマートフォン用地図アプリ

GPSで取得した現在地周辺の地図を表示

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
GPS機能にアクセスして取得した現在地の、その周辺の地図を表示する方法について解説致します。
講師:
03:17

字幕

このレッスンでは GPS機能にアクセスして取得した現在地の その周辺の地図を 表示する方法について解説いたします まずはダウンロードしてきたこちらの 「show_current_position」 というフォルダの中に入っている 「js」フォルダの中の「index.js」ファイル こちらエディタで開いてください そして これがそのファイルを開いた状態です このファイルを使いながら 今回のレッスンの 解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう まずは 前回までのレッスンのおさらいです 前回のレッスンでは 位置情報を取得して 成功した際に実行させるコールバック関数 「onSuccess」を こちらの部分で作成しました 今回は この「onSuccess」の処理の中で 実際にコールバック関数の 引数の中に格納されてきた GPSから取得した位置情報を使って 実際に現在地の周辺の地図を 表示させるようにしてみたいと思います 今回注目していただきたい部分は こちらの部分となります それでは具体的に見ていきましょう まず「pos」という変数に代入する形で 「=new google.maps.LatLng」 と書いて Google Maps APIで 利用できる位置情報のデータを こちらの変数「pos」に 代入するようにしています ちなみに こちらの変数「pos」は こちらの部分で定義しているものですね 要するに こちらの初期状態の方では 東京の位置情報を こちらの「pos」に代入していますが それを上書きするような形に しているわけです そして こちらの 「google.maps.LatLng」の 引数を見ていきましょう こちらには緯度と経度のデータが 順番に入っている形となっていますが こちらのコールバック関数の 引数「position」の中に格納された 緯度経度を取得してきています 例えば緯度を取得する場合には このように書きます まずは引数である「position」ですね 「position.coords.latitude」 と書けば 緯度の情報を取得できて そして経度を取得したい場合には 「position.coords.longitude」 と記入すれば取得できます これをこちらの 「 google.maps.LatLng」の中に 引数として設定することで こちらの変数「pos」には Google Maps APIで 認識できる位置情報の データが格納できたことになります そして そのあとの処理としては こちらの「showMap」ですね これは 前回のレッスンで 記述した部分になります こうすることによって こちらの「showMap」が発動されたとき こちらの「pos」に格納された位置情報が 反映されてきますので 自分の現在地の周辺の地図が アプリの中で表示されてくる といった形になります 以上でレッスンは終了です 今回はGPS機能に アクセスして取得した現在地の その周辺の地図を表示する方法について 解説いたしました 以降のレッスンでは 今回表示させた アプリの中の地図の現在地の地点に マーカーを立てる方法について 解説いたしますので そちらも合わせてご覧ください

PhoneGap Buildで作るGPSを使ったスマートフォン用地図アプリ

PhoneGap BuildとはHTMLやCSS、JavaScriptなどを使って制作したファイルをモバイルアプリに変換してくれるWebサービスです。このコースではPhoneGap Buildを使いながらGPS機能を用いた地図アプリの作成する方法について学習します。PhoneGap Buildの事前準備や地図機能の実装方法などについて詳しく解説します。

1時間15分 (23 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2015年03月11日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。