Titaniumでアプリ開発(8) Mapを表示する

MapViewを用いるとMapが表示できます

MapViewを用いた例

var win = Ti.UI.createWindow({

backgroundColor: '#F4F4F4'

});

var view = Ti.UI.createView();

var map = Ti.Map.createView({

mapType: Ti.Map.STANDARD_TYPE,

region: {latitude:35.6911, longitude:139.7067, latitudeDelta:0.01, longitudeDelta:0.01},

animate: true,

regionFit: true,

width: 300,

height: 400

});

view.add(map);

win.add(view);

win.open();

[説明]

mapType:以下の3つが用意されています。

• Titanium.Map.STANDARD_TYPE：全ての道路と一部の道路名を表示する、衛生画像は表示しない。
• Titanium.Map.SATELLITE_TYPE：衛星画像を表示する。
• Titanium.Map.HYBRID_TYPE：衛星画像や道路の名前を表示する。

region:latitude(緯度),longitude(経度),latitudeDelta,longitudeDelta(縮尺)

[実行結果]
新宿周辺が表示される。

ピンの操作

var shinjuku = Titanium.Map.createAnnotation({

latitude: 35.6911, longitude: 139.7067, 

pincolor: Titanium.Map.ANNOTATION_RED,

})

[説明]
pincolor：ピンの色。以下の3つが用意されている。

• Titanium.Map.ANNOTATION_GREEN
• Titanium.Map.ANNOTATION_PURPLE
• Titanium.Map.ANNOTATION_RED

[実行結果]
ピンが追加された。

ひとまず、現在地の緯度経度を確認出来るという簡単なアプリを作ってみようと思います。