ウェブ、ショウジン

Titanium MobileのMapView(Ti.Map)を使ってGoogle Mapsの特定の場所(複数)にピンを立ててみる

2012-7-12
Category
スマートフォン・アプリ

Titanium SDKは2.1.0.GAを使用。

app.js

// Google Mapsを表示するView[mapView]を生成
var mapView = Ti.UI.createView();

// annotations
var aoyamaUniv = Ti.Map.createAnnotation({
     latitude:35.661742, // 緯度
     longitude:139.709594, // 経度
     title:"青山学院大学",
     subtitle:'サブタイトル。iOSとAndroidだとここは色々違う。',
     animate:true,
     pincolor:Titanium.Map.ANNOTATION_PURPLE // ピン色は指定なしだとiOS[RED], Android[BLUE]
});
var kokugakuinUniv  = Ti.Map.createAnnotation({
     latitude:35.655867, // 緯度
     longitude:139.71189, // 経度
     title:"国学院大学",
     subtitle:'サブタイトル。iOSとAndroidだとここは色々違う。',
     animate:true,
     pincolor:Titanium.Map.ANNOTATION_GREEN
});
var shibuyaSt  = Ti.Map.createAnnotation({
     latitude:35.659109, // 緯度
     longitude:139.701419, // 経度
     title:"JR渋谷駅",
     subtitle:'サブタイトル。iOSとAndroidだとここは色々違う。',
     animate:true
});

// Ti.Mapを使って[map]オブジェクトを生成
var map = Ti.Map.createView({
	mapType:Ti.Map.STANDARD_TYPE, // Mapの表示形式には他にSATELLITE_TYPE, HYBRID_TYPEがある
	// regionは東京を漠然と
	region:{
		latitude:35.689488, // 緯度
		longitude:139.691706, // 経度
		latitudeDelta:0.1, // 緯度における縮尺
		longitudeDelta:0.1}, // 経度における縮尺
	animate:true,
	regionFit:true,
	userLocation:true, // 端末の位置を地図上に示す
	
	// annotationsで作ったピンを地図に追加 カンマつなぎで複数追加可能
	annotations:[aoyamaUniv, kokugakuinUniv, shibuyaSt]
});
mapView.add(map); // mapViewにmapをadd
win1.add(mapView); // win1にmapViewをadd

Androidエミュレータだと「Unknown permission com.google.android.googleapps.permission.うんのかんの」という[WARN]メッセージがたくさんでて実行できない。デバイスに直接インストールならば大丈夫。iOSではシミュレータでも問題なく実行できる。

Categories

Tag Cloud

AdMob Android Apache centos CodeIgniter EC-CUBE facebookアプリ facebookページ feed Firefox Flash google googleanalytics htaccess iPad iPhone JavaScript lamp mobile nginx ogp pear php plugin rollover rss sendmail setting smarty ssh Titanium Mobile Titanium Studio tutorial ubuntu vim VirtualBox vmware vps Windows WordPress xampp youtube さくらインターネット アクセス解析 カスタム投稿