第3回 地図アプリを作ってみよう！ (前編)
前回の記事で具体化したプロトタイプを元に、いよいよ実際に経路探索アプリを作っていきたいと思います。
まず、経路探索アプリにはどのような機能が必要になるでしょうか？プロトタイプから主な機能を洗い出してみます。
- 現在地の表示
アプリ起動時に、端末の現在地を地図上に表示する機能
- 目的地の検索
ユーザーが検索ウィンドウに入力した文字列から、目的地の地図情報を検索する機能
- 経路の検索
現在地から目的地までの経路の候補を表示する機能
- 進捗の表示
経路選択後、ユーザーが経路上のどの位置にいるかを表示する機能
前編ではまず、「現在地の表示」と「目的地の検索」の機能を作っていきます。
現在地の表示
現在地の位置情報を取得する
CORDOVAでの現在地情報の取得には、Geolocation APIのgetCurrentPositionメソッドを使用しました。
位置情報の取得に成功すると、getCurrentPositionメソッドの第一引数に指定したコールバック関数がコールされ、位置情報がpositionオブジェクトに渡されます。getCurrentPositionメソッドの第二引数には、位置情報の取得に失敗した場合のコールバック関数を指定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// 現在地情報取得メソッド function getCurrentPosition() { navigator.geolocation.getCurrentPosition(successCallback, errorCallback); } // 取得成功コールバック function successCallback(position) { createMap(position); } // 取得失敗コールバック function errorCallback(e) { alert("現在位置取得失敗:" + e.code); } |
取得した位置情報を使って地図を表示する
次に、取得した位置情報をGoogle Map上に表示します。
位置情報取得成功時のコールバックで受け取ったpositionオブジェクトから緯度・経度情報を取り出し、google.maps.LatLngオブジェクトを生成します。
地図の取得は、google.maps.Mapオブジェクトによって行います。第一引数に地図を描画したい要素オブジェクト、第二引数には地図を描画するためのオプションを指定します。今回は、地図のズームレベルを16、現在位置を地図の中心に指定、地図の種類はMapTypeId.ROADMAPとしました。
地図上のマーカー（矢印のようなもの）を表示するには、google.maps.Markerオブジェクトを使用します。positionにはマーカーを配置する座標となるLatLngオブジェクトを、mapにはマーカーを表示するMapオブジェクトを指定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// 地図取得メソッド function createMap(position) { // 緯度・経度を指定 var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); // 地図オプションを指定 var option = { zoom:16, center:latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; // 地図を取得 var map = new google.maps.Map(document.getElementById("map"), option); // マーカーを設定 var marker = new google.maps.Marker({ position: latlng, map: map }); } |
現在位置を表示するソースコードの全体は、下記のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
< !DOCTYPE html> <html> <head> <meta charset="utf-8"/> <style type="text/css"> html { height: 100% } body { height: 100% } #map { height: 100% } </style> <!-- Google Maps APIを取り込む --> <script src="http://maps.google.com/maps/api/js?v=3&sensor=true" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript"> // 現在地情報取得メソッド function getCurrentPosition() { navigator.geolocation.getCurrentPosition(successCallback, errorCallback); } // 取得成功コールバック function successCallback(position) { createMap(position); } // 取得失敗コールバック function errorCallback(e) { alert("現在位置取得失敗:" + e.code); } // 地図取得メソッド function createMap(position) { // 緯度・経度を指定 var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); // 地図オプションを指定 var option = { zoom:16, center:latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; // 地図を取得 var map = new google.maps.Map(document.getElementById("map"), option); // マーカーを設定 var marker = new google.maps.Marker({ position: latlng, map: map }); } </script> </head> <body onLoad="getCurrentPosition();"> <p>現在位置の表示</p> <div id="map"></div> </body> </html> |
Monacaデバッガアプリを起動すると、端末の現在地が表示されました。
目的地の検索
住所から位置情報を取得する
住所など、文字列からの位置情報取得には、Geocoding APIのgeocodeメソッドを使用しました。
geododeメソッドの第一引数のaddressプロパティに、検索する目的地の文字列を指定します。位置情報を取得すると、geocodeメソッドの第二引数に指定したコールバック関数がコールされ、位置情報がresultsオブジェクトに渡されます。statusオブジェクトにはステータスが渡され、位置情報の取得に成功したかどうかを判定することができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// 目的地情報取得メソッド function getEndPosition() { // テキストボックスから文字列を取得 var end = document.getElementById("endpoint").value; var geocoder = new google.maps.Geocoder(); geocoder.geocode({address: end}, getPositionCallback); } // 位置情報取得コールバック function getPositionCallback(results, status) { if (status == google.maps.GeocoderStatus.OK) { createMap(results); } else { alert("目的地取得失敗"); } } |
取得した位置情報を表示する
取得した位置情報をGoogle Map上に表示するには、現在地の表示で使用したcreateMapメソッドで経度緯度を取得する際に、位置情報取得コールバックで受け取ったresultsオブジェクトを使用すればOKです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
// 地図取得メソッド function createMap(results) { // 緯度経度を取得 var endlatlng = results[0].geometry.location; var endlat = endlatlng.lat(); var endlng = endlatlng.lng(); // 緯度・経度を指定 var latlng = new google.maps.LatLng(endlat, endlng); // 地図オプションを指定 var option = { zoom:16, center:latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; // 地図を取得 var map = new google.maps.Map(document.getElementById("map"), option); // マーカーを設定 var marker = new google.maps.Marker({ position: latlng, map: map }); } |
目的地の地図を表示するソースコードの全体は、下記のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
< !DOCTYPE html> <html> <head> <meta charset="utf-8"/> <style type="text/css"> html { height: 100% } body { height: 100% } #map { height: 100% } </style> <!-- Google Maps APIを取り込む --> <script src="http://maps.google.com/maps/api/js?v=3&sensor=true" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript"> // 目的地情報取得メソッド function getEndPosition() { // テキストボックスから文字列を取得 var end = document.getElementById("endpoint").value; var geocoder = new google.maps.Geocoder(); geocoder.geocode({address: end}, getPositionCallback); } // 位置情報取得コールバック function getPositionCallback(results, status) { if (status == google.maps.GeocoderStatus.OK) { createMap(results); } else { alert("目的地取得失敗"); } } // 地図取得メソッド function createMap(results) { // 緯度経度を取得 var endlatlng = results[0].geometry.location; var endlat = endlatlng.lat(); var endlng = endlatlng.lng(); // 緯度・経度を指定 var latlng = new google.maps.LatLng(endlat, endlng); // 地図オプションを指定 var option = { zoom:16, center:latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; // 地図を取得 var map = new google.maps.Map(document.getElementById("map"), option); // マーカーを設定 var marker = new google.maps.Marker({ position: latlng, map: map }); } </script> </head> <body> <div> <p>ゴール地点：<input id="endpoint"/></p> <button onclick="getEndPosition()">検索</button> </div> <div id="map"></div> </body> </html> |
テキストボックスに目的地を入力して検索ボタンを押すと、目的地の地図が表示されました。
次回は……
今回は、「現在地の表示」と「目的地の検索」の2つの機能を作成しました。次回は経路探索アプリのキモである「経路の検索」と「進捗の表示」を、アルゴリズムと共に紹介していきたいと思います。