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

GPSで取得した現在地にマーカーを立てる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
GPS機能にアクセスして取得した現在地に、マーカーを立てる方法について解説致します。
講師:
02:51

字幕

このレッスンでは GPS機能にアクセスして取得した現在地に マーカーを立てる方法について 解説いたします まずはダウンロードしてきた こちらの「set_marker」 というフォルダの中に入っている 「js」フォルダの中の 「index.js」ファイルを エディタで開いてください そして これがそのファイルを開いた状態です このファイルを使って 今回のレッスンの解説を 進めていきたいと思います それでは 早速レッスンを始めていきましょう まずは 前回までのレッスンのおさらいです 前回までのレッスンでは GPSにアクセスして現在地を取得した後 こちらの「onSuccess」という コールバック関数を作成して その中で取得してきた緯度経度を 変数「pos」に代入しました そして「showMap」という関数を実行して 自分の現在地の周辺の地図を 表示させるようにしました 今回はその取得してきた 現在地の緯度経度に対して 地図の上にマーカーを立てる方法について 見ていきたいと思います 今回注目していただきたい部分は こちらの部分となります こちらの部分で地図上の現在地に マーカーを立てる処理を行っています それでは具体的にどのように実装しているか 確認していきましょう まずは変数を定義します 「var」と書いて変数の名前を 今回は「marker」としています そして「=new google.maps.Marker」 と書きます そして二つの「()」で囲ってあげて そして「;」で処理を終えます そしてこの「{}」の間に 具体的なマーカーの設定を記述していきます まずこちらの「position」ですが マーカーを立てる緯度経度を表します ですので 今回は取得してきた 現在地の緯度経度に対して マーカーを立てたいので それをGoogle Maps APIが 扱えるようにしたデータ 変数「pos」を設定しています そして次に こちらの「map」という項目ですね こちらの「map」という項目には そのマーカーを設置したい地図が 格納されている変数を 指定してあげればOKです 今回はこちらの部分ですね こちらで作成した Google Mapが格納された変数 「map」をこちらに設定してあげます そうすることで アプリの中で表示されているマップ上に マーカーを立てることが できるようになります そして 最後は「title」という項目ですね こちらは名前の通り そのマーカーのタイトルに該当するものなので 今回は「現在地」としておきます このように書くことで アプリの中で表示されている 地図上の現在地の位置に マーカーを設置することができるわけです 以上でレッスンは終了です 今回はGPS機能に アクセスして取得した現在地に マーカーを立てる方法について 解説いたしました 以降のレッスンからは Google Maps APIの Geolocation機能を使って アプリ内で地図検索機能を 実装する方法について解説していきますので そちらも合わせてご覧ください

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宛までご連絡ください。