トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS

Titanium Mobile/地図 のバックアップ(No.33)

Titaniumでの地図表示方法

Titaniumで地図を表示する方法は色々有りますが、３通りご紹介します。

地図組み込み方法メリットデメリット
Ti.Mapモジュール・Titanium標準の地図機能でサンプルが多いです。
・iOSとAndroidでほぼ同じプログラムとなります。
・ピン(Annotation)周りの操作が豊富（ピン画像を変えたり、ピンをタッチしたときに説明のテキストや画像やを含んだビューを開くなど）
・ソースがシンプルでコーディングしやすいです。また、Alloyでピンを書くことも可能。
・もしApple Maps利用が必須のときは唯一の選択肢
・Ti 4.1.0からマップ上にライン・ポリゴン・サークルを描画できるようになりました。		・iOSでは貧弱なApple Mapsとなってしまいます。
・地図をクリックした地点の緯度・軽度が取得できません。
TiGMapモジュール(iOS専用)・iOSでGoogle Mapsを使用できます。
・タッチや長押しした位置の緯度・経度が取得できます。
・使用経験が無いためその他詳細は不明		・iOSのみ対応ですので、AndroidではTi.Mapを使ってプログラムを分ける必要があります。
・使用経験が無いためその他詳細は不明
WebViewにGoogle Mapsを組み込む・同じプログラムでiOS、Android共にGoogle Mapsを使用できます。
・Google Maps APIを操作して色々な機能を使用できます（例えばタッチした地点の緯度・経度を取得したり、地図にポリゴン描画したり、２地点の経路を表示したり）。
・WebアプリでGoogle Maps APIを使用している開発者にとって使いやすいです。
・同じ画面に地図を２つ配置できます。
・同様の方法でYahoo地図 APIも利用できます。		・WebViewに組み込むので、プログラム本体との連携が複雑となります。
↑

(1) Ti.Mapモジュールを用いた地図表示

Titaniumで標準的な地図表示方法です。iOSではApple Maps、AndroidではGoogle Mapsで表示されます。以前はデフォルトで使用出来ましたが、2014-02-20時点ではモジュール追加画面から「ti.map [android, ios] - Global {API Ver. 2}」を追加して使用します。 また、Alloyの場合はalloy.jsに次の行を追加します。

Alloy.Globals.Map = require('ti.map');
↑

使用上のご注意

現時点(2014-02-20)ではTitaniumデフォルトのAndroid用Google Mapsのバージョンは１で、これを２に対応させるためにモジュールで組み込むように変わったそうです。最近の多くのサンプルではAndroidだけこのモジュールを組み込み、iOSはデフォルトのTi.Mapのままと分けているようです。しかし、両者共通でこのモジュールを使用するソースで書けます。

↑

リンク

↑

(2) TiGMapモジュールを用いた地図表示(iOS専用)

Objective-CでGoogle Mapsを利用する場合は、Google提供の「Google Maps SDK for iOS」を使用します。TiGMapはこのSDKを取り込んだiOS専用Titanium用モジュールです。

Google Maps API よくある質問 使用制限の影響を受ける Maps API サービスを教えてください。で『Google Earth API、および Android や iOS などのモバイル プラットフォーム用 Maps API は対象外です。Google マップの埋め込み機能や、地図を含む埋め込み機能を提供するその他の Google サービスのご利用は、これらの使用制限の対象とはなりません。』と有るので、利用回数の制限は無いようです。

↑

使用上のご注意

そのままではビルドできません。module.xcconfigのパス書き換えが要ります。

↑

モジュール

↑

リンク

↑

(3) WebViewにGoogle Mapsを組み込んだ地図表示

詳しくはapp_8.js, map.htmlを参照してください。

Google Maps JavaScript API v3 使用制限と購入によると、90日間連続で1日あたり最大25,000回を超えると有料となるようです。

↑

マップサンプルソース by 八木氏

map_8だけWebViewにGoogle Mapsを組み込んだ地図表示です。それ以外はTi.Mapモジュールを用いた地図表示です。（厳密に言うとmap_8も一部Ti.Mapモジュールを用いています）

app_1.js
緯度経度固定位置のマップを表示
app_2.js
現在位置のマップを表示
app_3_1.js
現在位置にピンを打ったマップを表示
app_3_2.js
現在位置にピンを打ったマップを表示し、10秒毎に現在位置のピンを追加 ... 実際にはTi.Geolocation.getCurrentPositionはキャッシュされるので、使えないそうです。
app_4_1.js
現在位置の住所を表示。緯度経度→住所テキストの変換(reverse geocoding)にGoogle Maps APIを利用。Ti.Geolocation.reverseGeocoderは返却されるテキスト内容が良くないので、その代替です。

例えば東京駅の緯度：35.681382、経度：139.766084を変換した場合は次のようになります。
Ti.Geolocation.reverseGeocoderは次を返します。
407, 神田駿河台三丁目, 千代田区 (Chiyoda), 北葛飾郡, 100-0005, 日本
Google Maps APIは次を返します。
日本, 東京都千代田区丸の内１丁目９−１
app_5_1.js
入力した地名の地図を表示。住所テキスト→緯度経度の変換(forward geocoding)にGoogle Maps APIを利用。Ti.Geolocation.forwardGeocoderは良くないので、その代替です。以降のサンプルで言語は日本語、中国語、台湾語に対応
app_7.js
現在位置のマップを表示（Google Maps APIでの住所テキスト取得付き）、入力した地名地点にピンを配置し、現在位置からの直線を表示。
app_7_1.js
app_7.jsの機能に加え、道順ボタンを押すとGoogle Maps APIでそこまでの道順座標配列を取得し、ルートを表示。
注意事項：map_8の場合と比べて途中を端折ったり目的地まで到達していなかったり、かなりいい加減なデータが返ることがあるそうです。
app_8.js, map.html
app_7_1.jsの機能に加え、道順ボタンを押すとルートをWebViewに入れたGoogle Mapsで表示
app_9.js
ピンをクリックするとチェックイン画面を表示
app_10.js, arrow.gif
矢印画像でコンパスを表示


注意：Ti.Mapはモジュールとして組み込むように変わったので、tiapp.xmlにti.mapモジュールを組み込み、app.jsの先頭に次の行を追加してください。

Ti.Map = require('ti.map');


注意：API仕様が変わったため、app_7.js, app_8.jsで「map.addRoute({...});」の行は次のように書き換える必要が有ります。

#pre{{
var route = Ti.Map.createRoute({
color: 'red',
points: [{latitude:geo.lat, longitude:geo.lng}, {latitude:current_position.latitude,longitude:current_position.longitude}],
width: 4,
});
map.addRoute(route);
}}
注意：API仕様が変わったため、app_7_1.jsで次のように書き換える必要が有ります。
１つ目「map.addRoute({name:'道順', points:points, color:'Red'});」

#pre{{
var route = Ti.Map.createRoute({
color: 'red',
points: points,
width: 4,
});
map.addRoute(route);
}}
２つ目「map.addRoute({...});」

#pre{{
var route = Ti.Map.createRoute({
color: 'blue',
points: [{latitude:geo.lat, longitude:geo.lng}, {latitude:current_position.latitude,longitude:current_position.longitude}],
width: 4,
});
map.addRoute(route);
}}

↑

リンク