Titanium Mobile/地図

Last-modified: 2018-11-14 (水) 15:24:04 (2153d)

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');

Appcelerator Titanium Alloy Map Integration with ListView Mobile App | YouTube

↑

使用上のご注意

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

↑

リンク

Modules.Map | Appcelerator Titanium Documentation
TitaniumでAndroid向けのMapModule動作させるのにとても苦労したのでその振り返り | TitaniumMobile勉強記
Google Maps API v2用Androidモジュールを設定 | SE奮闘記
Titanium Advent Calendar 2013 7日目 regionChangedの抑制 | もぎゃろぐ ... 『GoogleMapsSDKのバージョンが上がった関係で、現在Androidでは標準のMapViewではなくてModules.Mapを使うように言われていて...』
Android版のGoogleMapsアプリのようなUIをTitaniumで実現する方法 | TitaniumMobile勉強記
Geolocation.addEventListenerでアプリが重くなる | Titaniumユーザー会サポートBBS ... AndroidのMapViewでLocationイベントが頻発して重くなる時の回避方法
Android　で　mapを表示させようとすると落ちる | Don't Fall - Titanium Mobileユーザー会サポートBBS
Modules.Map.View でタップした位置の緯度経度を取得したいがclickイベントが発火しない | Don't Fall - Titanium Mobileユーザー会サポートBBS ... 緯度経度を工夫して取得する方法
Translating NSLocationAlwaysUsageDescription | TiDev ... iOS8から必要になった設定の記述方法(ローカライズ対応版)
Titanium3.4でiOS8の位置情報をとる際の設定 | Qiita ... iOS8から必要になった設定の記述方法
titanium_mobile / iphone / Classes / GeolocationModule.m ... iOS Map部分のTitanium内部ソース
k0sukey/ti.map at MKDirections ... iOSの機能を利用して経路探索したルートを表示するマップ(iOS専用)
m1ga/titanium-libraries ... 移動毎に処理できるiOS/Android共通のJavaScriptモジュール
Titanium - ti.map をちょっとだけ便利にしちゃう改造 | Qiita
Appcelerator Titanium 4.1.0 Sample App ... Ti 4.1.0からはマップ上にラインや円を描画できます。
Ti.MarkerManager ... Ti.MarkerManager is a library for Appcelerator Titanium for realizing to display a lot of annotations on 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のパス書き換えが要ります。

↑

モジュール

daisaru11/TiGMap | GitHub ... TiGMapのオリジナルだそうです。更新は止まっているようです。コード記述方法はこちらのReadmeが詳しいようです。
alperdincer/TiGMap | GitHub ... ☆TiGMapをforkして作られた最新版です。こちらを用いるのが最新でいいようです(by 八木氏)。
Google Maps for iOS | Appcelerator Marketplace ... $30でほぼ同じ仕様のものが販売されているようです。他との違いは不明です。
Ti.GoogleMaps ... 多機能のiOS専用地図モジュールだそうです。Appcelerator社員のようで、これが一番いいかも？

↑

リンク

↑

(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モジュールを用いています）

緯度経度固定位置のマップを表示

現在位置のマップを表示

現在位置にピンを打ったマップを表示

現在位置にピンを打ったマップを表示し、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);
}}

↑

リンク

Geocoding.jp ... ☆Titaniumではありませんが、緯度経度の値を調べたい時に利用できます。
Titanium MobileのGeocodingで日本語を扱う | Selfkleptomaniac ... 住所番地と緯度経度の双方向変換など
iOSとAndroidで地図アプリ（Google Maps）を起動 | SE奮闘記
どっちのOSでも位置情報を連続取得！ | ビスタのTitanium奮闘記 ... Androidでも連続して位置情報を取得する方法
緯度・経度から二点間の距離と方向を計算する | それはBooks
benbahrenburg/Ti.Geocoder | GitHub
富豪実装なJavaScriptジオコーダーを作ってみた | Qiita
Titanium module: TiGeocoder • gitTio
Titanium module: TiGeoVisits • gitTio ... iPhone 6以降で使用できるCLVisitsのモジュールです。どのくらいの時間滞在したかが取得できます。
Titanium module: Ti.GeoTools • gitTio ... Ti.Mapを拡張したり、便利なWeb APIが利用できるモジュールです。緯度経度から高さも取れるようです。
Titanium module: Ti.LatLon • gitTio ... 2地点間の距離取得といった地図関連の計算モジュール

Titanium Mobile/地図

Titaniumでの地図表示方法

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

使用上のご注意

リンク

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

使用上のご注意

モジュール

リンク

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

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

リンク

最新の40件