第3回 地図アプリを作ってみよう! (前編)

前回の記事で具体化したプロトタイプを元に、いよいよ実際に経路探索アプリを作っていきたいと思います。
まず、経路探索アプリにはどのような機能が必要になるでしょうか?プロトタイプから主な機能を洗い出してみます。

  1. 現在地の表示

    アプリ起動時に、端末の現在地を地図上に表示する機能

  2. 目的地の検索

    ユーザーが検索ウィンドウに入力した文字列から、目的地の地図情報を検索する機能

  3. 経路の検索

    現在地から目的地までの経路の候補を表示する機能

  4. 進捗の表示

    経路選択後、ユーザーが経路上のどの位置にいるかを表示する機能

前編ではまず、「現在地の表示」「目的地の検索」の機能を作っていきます。

 

現在地の表示

現在地の位置情報を取得する


CORDOVAでの現在地情報の取得には、Geolocation APIのgetCurrentPositionメソッドを使用しました。

位置情報の取得に成功すると、getCurrentPositionメソッドの第一引数に指定したコールバック関数がコールされ、位置情報がpositionオブジェクトに渡されます。getCurrentPositionメソッドの第二引数には、位置情報の取得に失敗した場合のコールバック関数を指定します。

 

取得した位置情報を使って地図を表示する


次に、取得した位置情報をGoogle Map上に表示します。

位置情報取得成功時のコールバックで受け取ったpositionオブジェクトから緯度・経度情報を取り出し、google.maps.LatLngオブジェクトを生成します。

地図の取得は、google.maps.Mapオブジェクトによって行います。第一引数に地図を描画したい要素オブジェクト、第二引数には地図を描画するためのオプションを指定します。今回は、地図のズームレベルを16、現在位置を地図の中心に指定、地図の種類はMapTypeId.ROADMAPとしました。

地図上のマーカー(矢印のようなもの)を表示するには、google.maps.Markerオブジェクトを使用します。positionにはマーカーを配置する座標となるLatLngオブジェクトを、mapにはマーカーを表示するMapオブジェクトを指定します。

 

現在位置を表示するソースコードの全体は、下記のようになります。

 

Monacaデバッガアプリを起動すると、端末の現在地が表示されました。

 現在地

 

目的地の検索

住所から位置情報を取得する


住所など、文字列からの位置情報取得には、Geocoding APIのgeocodeメソッドを使用しました。

geododeメソッドの第一引数のaddressプロパティに、検索する目的地の文字列を指定します。位置情報を取得すると、geocodeメソッドの第二引数に指定したコールバック関数がコールされ、位置情報がresultsオブジェクトに渡されます。statusオブジェクトにはステータスが渡され、位置情報の取得に成功したかどうかを判定することができます。

 

取得した位置情報を表示する


取得した位置情報をGoogle Map上に表示するには、現在地の表示で使用したcreateMapメソッドで経度緯度を取得する際に、位置情報取得コールバックで受け取ったresultsオブジェクトを使用すればOKです。

 

目的地の地図を表示するソースコードの全体は、下記のようになります。

 

テキストボックスに目的地を入力して検索ボタンを押すと、目的地の地図が表示されました。

 目的地

 

次回は……

今回は、「現在地の表示」「目的地の検索」の2つの機能を作成しました。次回は経路探索アプリのキモである「経路の検索」「進捗の表示」を、アルゴリズムと共に紹介していきたいと思います。

Leave a Reply

メールアドレスが公開されることはありません。