mashup caravan android-talks
DESCRIPTION
TRANSCRIPT
![Page 1: Mashup caravan android-talks](https://reader033.vdocument.in/reader033/viewer/2022051412/549a3846ac7959482e8b5a06/html5/thumbnails/1.jpg)
MapionMapion Android Maps Android Maps APIAPI
#MA6 #MA6 MashupMashup Caravan Caravan –– Android/VOCALOID Android/VOCALOID TalksTalks
株式会社マピオン株式会社マピオン
本城本城 博昭博昭
2010/10/272010/10/27
![Page 2: Mashup caravan android-talks](https://reader033.vdocument.in/reader033/viewer/2022051412/549a3846ac7959482e8b5a06/html5/thumbnails/2.jpg)
自己紹介自己紹介
nn 名前名前nn 本城本城 博昭博昭 / @honjo2/ @honjo2
nn 所属所属nn 株式会社マピオン株式会社マピオン 技術開発部技術開発部
nn 業務内容業務内容nn マピオンの基盤となる技術の研究・開発マピオンの基盤となる技術の研究・開発
nn 成果成果nn 地図地図APIAPIの設計・開発の設計・開発
nn 開発プラットフォームの標準化開発プラットフォームの標準化nn MapionMapion Android Maps APIAndroid Maps API
![Page 3: Mashup caravan android-talks](https://reader033.vdocument.in/reader033/viewer/2022051412/549a3846ac7959482e8b5a06/html5/thumbnails/3.jpg)
MapionMapion Android Maps APIAndroid Maps APIとはとは
nn マピオン版マピオン版Google Maps APIGoogle Maps API。。nn 完全ネイティブ。完全ネイティブ。
nn 使い方同じ。使い方同じ。
![Page 4: Mashup caravan android-talks](https://reader033.vdocument.in/reader033/viewer/2022051412/549a3846ac7959482e8b5a06/html5/thumbnails/4.jpg)
対応バージョン対応バージョン
nn Android 1.6Android 1.6以上以上
![Page 5: Mashup caravan android-talks](https://reader033.vdocument.in/reader033/viewer/2022051412/549a3846ac7959482e8b5a06/html5/thumbnails/5.jpg)
導入手順導入手順
1.1. APIAPIキー取得キー取得
nn http://http://labs.mapion.co.jp/api/androidmaps/register.htmllabs.mapion.co.jp/api/androidmaps/register.html
2.2. ライブラリ(ライブラリ(jarjar)をプロジェクトに追加)をプロジェクトに追加nn http://labs.mapion.co.jp/api/dl/mapshttp://labs.mapion.co.jp/api/dl/maps--0.8.jar0.8.jar
3.3. AndroidManifest.xmlAndroidManifest.xmlに以下追記に以下追記nn <uses<uses--permission permission android:nameandroid:name="="android.permission.INTERNETandroid.permission.INTERNET" "
/> />
![Page 6: Mashup caravan android-talks](https://reader033.vdocument.in/reader033/viewer/2022051412/549a3846ac7959482e8b5a06/html5/thumbnails/6.jpg)
実践実践
![Page 7: Mashup caravan android-talks](https://reader033.vdocument.in/reader033/viewer/2022051412/549a3846ac7959482e8b5a06/html5/thumbnails/7.jpg)
地図を表示地図を表示(1/2)(1/2)publicpublic classclass MainActivityMainActivity extendsextends MapActivityMapActivity {{@Override@Overridepublicpublic voidvoid onCreate(BundleonCreate(Bundle bundle) {bundle) {supersuper.onCreate(bundle.onCreate(bundle););MapViewMapView mapViewmapView = = newnew MapView(MapView(thisthis,,
““APIKEY");APIKEY");mapView.setClickable(mapView.setClickable(truetrue); // false); // falseで静的で静的
setContentView(mapViewsetContentView(mapView););}}
}}
![Page 8: Mashup caravan android-talks](https://reader033.vdocument.in/reader033/viewer/2022051412/549a3846ac7959482e8b5a06/html5/thumbnails/8.jpg)
地図地図をを表示表示(2/2)(2/2)
nn ソースコードソースコードnn http://gist.github.com/635850http://gist.github.com/635850
nn サンプル画像(マピオンサンプル画像(マピオン / / グーグル)グーグル)
![Page 9: Mashup caravan android-talks](https://reader033.vdocument.in/reader033/viewer/2022051412/549a3846ac7959482e8b5a06/html5/thumbnails/9.jpg)
位置と縮尺を指定位置と縮尺を指定(1/2)(1/2)
// // 位置指定位置指定
mapView.getController().setCentermapView.getController().setCenter((newnew GeoPointGeoPoint((((intint) (35.7 * 1E6),) (35.7 * 1E6),((intint) (139.7 * 1E6)) (139.7 * 1E6)
));));
// // 縮尺指定縮尺指定
mapView.getController().setZoom(5);mapView.getController().setZoom(5);
![Page 10: Mashup caravan android-talks](https://reader033.vdocument.in/reader033/viewer/2022051412/549a3846ac7959482e8b5a06/html5/thumbnails/10.jpg)
位置と縮尺を指定位置と縮尺を指定(2/2)(2/2)
nn ソースコードソースコードnn http://gist.github.com/635882http://gist.github.com/635882
nn サンプル画像(マピオンサンプル画像(マピオン / / グーグル)グーグル)
![Page 11: Mashup caravan android-talks](https://reader033.vdocument.in/reader033/viewer/2022051412/549a3846ac7959482e8b5a06/html5/thumbnails/11.jpg)
移動移動(1/2)(1/2)// // ノンアニメーションノンアニメーションmapView.getController().setCentermapView.getController().setCenter((
new new GeoPointGeoPoint((((intint) (35.7 * 1E6),) (35.7 * 1E6),((intint) (139.7 * 1E6)) (139.7 * 1E6)
));));
// // アニメーションアニメーションmapView.getController().animateTomapView.getController().animateTo((
newnew GeoPointGeoPoint((((intint) (35.7 * 1E6),) (35.7 * 1E6),((intint) (139.7 * 1E6)) (139.7 * 1E6)
));));
![Page 12: Mashup caravan android-talks](https://reader033.vdocument.in/reader033/viewer/2022051412/549a3846ac7959482e8b5a06/html5/thumbnails/12.jpg)
移動移動(2/2)(2/2)
nn ソースコードソースコードnn http://gist.github.com/635917http://gist.github.com/635917
nn サンプル画像(マピオンサンプル画像(マピオン / / グーグル)グーグル)
![Page 13: Mashup caravan android-talks](https://reader033.vdocument.in/reader033/viewer/2022051412/549a3846ac7959482e8b5a06/html5/thumbnails/13.jpg)
円を描画円を描画(1/2)(1/2)Overlay circle = Overlay circle = newnew Overlay() {Overlay() {@Override@Overridepublicpublic voidvoid draw(Canvasdraw(Canvas canvas, canvas, MapViewMapView mapViewmapView, , booleanboolean shadow) {shadow) {ifif (!shadow) {(!shadow) {GeoPointGeoPoint p = p = newnew GeoPoint((GeoPoint((intint) (35.641625 * 1E6),) (35.641625 * 1E6),((intint) (139.749803 * 1E6));) (139.749803 * 1E6));
Point pos = Point pos = mapView.getProjection().toPixels(pmapView.getProjection().toPixels(p, , nullnull););
Paint Paint paintpaint = = newnew Paint();Paint();paint.setColor(Color.paint.setColor(Color.argbargb(150, 255, 0, 255));(150, 255, 0, 255));paint.setAntiAlias(paint.setAntiAlias(truetrue););
canvas.drawCircle(pos.xcanvas.drawCircle(pos.x, , pos.ypos.y, 30.0f, paint);, 30.0f, paint);}}
}}};};mapView.getOverlays().add(circlemapView.getOverlays().add(circle););
![Page 14: Mashup caravan android-talks](https://reader033.vdocument.in/reader033/viewer/2022051412/549a3846ac7959482e8b5a06/html5/thumbnails/14.jpg)
円を描画円を描画(2/2)(2/2)
nn ソースコードソースコードnn http://gist.github.com/635930http://gist.github.com/635930
nn サンプル画像(マピオンサンプル画像(マピオン / / グーグル)グーグル)
![Page 15: Mashup caravan android-talks](https://reader033.vdocument.in/reader033/viewer/2022051412/549a3846ac7959482e8b5a06/html5/thumbnails/15.jpg)
ラインを描画ラインを描画(1/2)(1/2)Overlay line = Overlay line = newnew Overlay() {Overlay() {@Override@Overridepublicpublic voidvoid draw(Canvasdraw(Canvas canvas, canvas, MapViewMapView mapViewmapView, , booleanboolean shadow) {shadow) {ifif (!shadow) {(!shadow) {GeoPointGeoPoint one = one = newnew GeoPoint((GeoPoint((intint) (35.641625 * 1E6), () (35.641625 * 1E6), (intint) (139.749803 * 1E6));) (139.749803 * 1E6));GeoPointGeoPoint two = two = newnew GeoPoint((GeoPoint((intint) (35.642625 * 1E6), () (35.642625 * 1E6), (intint) (139.747803 * 1E6));) (139.747803 * 1E6));GeoPointGeoPoint three = three = newnew GeoPoint((GeoPoint((intint) (35.642625 * 1E6), () (35.642625 * 1E6), (intint) (139.750803 * 1E6));) (139.750803 * 1E6));
Point Point onePointonePoint = = mapView.getProjection().toPixels(onemapView.getProjection().toPixels(one, , nullnull););Point Point twoPointtwoPoint = = mapView.getProjection().toPixels(twomapView.getProjection().toPixels(two, , nullnull););Point Point threePointthreePoint = = mapView.getProjection().toPixels(threemapView.getProjection().toPixels(three, , nullnull););
Paint Paint paintpaint = = newnew Paint();Paint();paint.setAntiAlias(paint.setAntiAlias(truetrue););
paint.setStrokeWidth(4);paint.setStrokeWidth(4);paint.setStyle(Paint.Style.paint.setStyle(Paint.Style.STROKESTROKE););paint.setColor(Color.paint.setColor(Color.argbargb(150, 255, 0, 255));(150, 255, 0, 255));canvas.drawLines(canvas.drawLines(newnew floatfloat[]{onePoint.x[]{onePoint.x, , onePoint.yonePoint.y, , twoPoint.xtwoPoint.x, , twoPoint.ytwoPoint.y,,twoPoint.xtwoPoint.x, , twoPoint.ytwoPoint.y, , threePoint.xthreePoint.x, , threePoint.ythreePoint.y}, paint);}, paint);
}}}}
};};mapView.getOverlays().add(linemapView.getOverlays().add(line););
![Page 16: Mashup caravan android-talks](https://reader033.vdocument.in/reader033/viewer/2022051412/549a3846ac7959482e8b5a06/html5/thumbnails/16.jpg)
ラインを描画ラインを描画(2/2)(2/2)
nn ソースコードソースコードnn http://gist.github.com/635942http://gist.github.com/635942
nn サンプル画像(マピオンサンプル画像(マピオン / / グーグル)グーグル)
![Page 17: Mashup caravan android-talks](https://reader033.vdocument.in/reader033/viewer/2022051412/549a3846ac7959482e8b5a06/html5/thumbnails/17.jpg)
ポリゴンを描画ポリゴンを描画(1/2)(1/2)Overlay polygon = Overlay polygon = newnew Overlay() {Overlay() {@Override@Overridepublicpublic voidvoid draw(Canvasdraw(Canvas canvas, canvas, MapViewMapView mapViewmapView, , booleanboolean shadow) {shadow) {ifif (!shadow) {(!shadow) {GeoPointGeoPoint one = one = newnew GeoPoint(35641625, 139749803);GeoPoint(35641625, 139749803);GeoPointGeoPoint two = two = newnew GeoPoint(35642625, 139747803);GeoPoint(35642625, 139747803);GeoPointGeoPoint three = three = newnew GeoPoint(35642625, 139751803);GeoPoint(35642625, 139751803);
Point Point onePointonePoint = = mapView.getProjection().toPixels(onemapView.getProjection().toPixels(one, , nullnull););Point Point twoPointtwoPoint = = mapView.getProjection().toPixels(twomapView.getProjection().toPixels(two, , nullnull););Point Point threePointthreePoint = = mapView.getProjection().toPixels(threemapView.getProjection().toPixels(three, , nullnull););
Paint Paint paintpaint = = newnew Paint();Paint();paint.setAntiAlias(paint.setAntiAlias(truetrue););paint.setColor(Color.paint.setColor(Color.argbargb(150, 255, 0, 255));(150, 255, 0, 255));paint.setStyle(Paint.Style.paint.setStyle(Paint.Style.FILL_AND_STROKEFILL_AND_STROKE););Path Path pathpath = = newnew Path();Path();
path.moveTo(onePoint.xpath.moveTo(onePoint.x, , onePoint.yonePoint.y););path.lineTo(twoPoint.xpath.lineTo(twoPoint.x, , twoPoint.ytwoPoint.y););path.lineTo(threePoint.xpath.lineTo(threePoint.x, , threePoint.ythreePoint.y););path.lineTo(onePoint.xpath.lineTo(onePoint.x, , onePoint.yonePoint.y););canvas.drawPath(pathcanvas.drawPath(path, paint);, paint);
}}}}
};};mapView.getOverlays().add(polygonmapView.getOverlays().add(polygon););
![Page 18: Mashup caravan android-talks](https://reader033.vdocument.in/reader033/viewer/2022051412/549a3846ac7959482e8b5a06/html5/thumbnails/18.jpg)
ポリゴンを描画ポリゴンを描画(2/2)(2/2)
nn ソースコードソースコードnn http://gist.github.com/635949http://gist.github.com/635949
nn サンプル画像(マピオンサンプル画像(マピオン / / グーグル)グーグル)
![Page 19: Mashup caravan android-talks](https://reader033.vdocument.in/reader033/viewer/2022051412/549a3846ac7959482e8b5a06/html5/thumbnails/19.jpg)
アイコンを描画アイコンを描画(1/2)(1/2)
nn ItemizedOverlayItemizedOverlayの拡張で実現。の拡張で実現。
![Page 20: Mashup caravan android-talks](https://reader033.vdocument.in/reader033/viewer/2022051412/549a3846ac7959482e8b5a06/html5/thumbnails/20.jpg)
アイコンを描画アイコンを描画(2/2)(2/2)
nn ソースコードソースコードnn http://gist.github.com/635958http://gist.github.com/635958
nn サンプル画像(マピオンサンプル画像(マピオン / / グーグル)グーグル)
![Page 21: Mashup caravan android-talks](https://reader033.vdocument.in/reader033/viewer/2022051412/549a3846ac7959482e8b5a06/html5/thumbnails/21.jpg)
回転回転(1/2)(1/2)
mapView.setRotation(mapView.setRotation(truetrue););mapView.setDegrees(45.0f); // mapView.setDegrees(45.0f); // 角度角度
![Page 22: Mashup caravan android-talks](https://reader033.vdocument.in/reader033/viewer/2022051412/549a3846ac7959482e8b5a06/html5/thumbnails/22.jpg)
回転回転(2/2)(2/2)
nn ソースコードソースコードnn http://gist.github.com/635978http://gist.github.com/635978
nn サンプル画像サンプル画像
![Page 23: Mashup caravan android-talks](https://reader033.vdocument.in/reader033/viewer/2022051412/549a3846ac7959482e8b5a06/html5/thumbnails/23.jpg)
タップ移動&タップ移動&RRジオコーダジオコーダ(1/2)(1/2)
@Override@Overridepublicpublic booleanboolean onSingleTapUp(MotionEventonSingleTapUp(MotionEvent e) {e) {GeoPointGeoPoint temp = temp = mapView.getProjectionmapView.getProjection()()..fromPixelsfromPixels((((intint) ) e.getXe.getX(),(),((intint) ) e.getYe.getY()()
););
mapView.getController().animateTo(tempmapView.getController().animateTo(temp););
returnreturn falsefalse;;}}
![Page 24: Mashup caravan android-talks](https://reader033.vdocument.in/reader033/viewer/2022051412/549a3846ac7959482e8b5a06/html5/thumbnails/24.jpg)
タップ移動&タップ移動&RRジオコーダジオコーダ(2/2)(2/2)
nn ソースコードソースコードnn http://gist.github.com/633865http://gist.github.com/633865
nn サンプル画像(マピオンサンプル画像(マピオン / / グーグル)グーグル)
![Page 25: Mashup caravan android-talks](https://reader033.vdocument.in/reader033/viewer/2022051412/549a3846ac7959482e8b5a06/html5/thumbnails/25.jpg)
地図画像切り替え地図画像切り替え(1/2)(1/2)
nn オフィシャルと同じ画像オフィシャルと同じ画像nn mapView.changeMap(MapView.STANDARDmapView.changeMap(MapView.STANDARD););
nn 軽い画像(デフォルト)軽い画像(デフォルト)nn mapView.changeMap(MapView.LIGHTmapView.changeMap(MapView.LIGHT););
![Page 26: Mashup caravan android-talks](https://reader033.vdocument.in/reader033/viewer/2022051412/549a3846ac7959482e8b5a06/html5/thumbnails/26.jpg)
地図画像切り替え地図画像切り替え(2/2)(2/2)
nn ソースコードソースコードnn http://gist.github.com/648611http://gist.github.com/648611
nn サンプル画像サンプル画像
![Page 27: Mashup caravan android-talks](https://reader033.vdocument.in/reader033/viewer/2022051412/549a3846ac7959482e8b5a06/html5/thumbnails/27.jpg)
TipsTips
nn 世界測地系⇔日本測地系世界測地系⇔日本測地系 変換方法変換方法GeoPointGeoPoint tkytky = = Map.wgsToTkyMap.wgsToTky((new GeoPoint(35500000, 139500000)new GeoPoint(35500000, 139500000)
););GeoPointGeoPoint wgswgs = = Map.tkyToWgs(tkyMap.tkyToWgs(tky););
nn 縮尺の数縮尺の数nn 現状現状1010((11~~1010)、そのうち増やす予定)、そのうち増やす予定
nn MaxMaxの縮尺レベルはの縮尺レベルはMapView#MapView#getMaxZoomLevelgetMaxZoomLevelで取得可能で取得可能
![Page 28: Mashup caravan android-talks](https://reader033.vdocument.in/reader033/viewer/2022051412/549a3846ac7959482e8b5a06/html5/thumbnails/28.jpg)
以上を踏まえて以上を踏まえて
nn 普通に普通にGoogle MapsGoogle Mapsを使えばいいのでは?を使えばいいのでは?
![Page 29: Mashup caravan android-talks](https://reader033.vdocument.in/reader033/viewer/2022051412/549a3846ac7959482e8b5a06/html5/thumbnails/29.jpg)
売り売り
nn 導入が楽(キー取得簡単)導入が楽(キー取得簡単)
nn 回転(回転(Google MapsGoogle Mapsも改造すればできる)も改造すればできる)
nn 組込み組込みAndroidAndroidでも使えるでも使える
nn なによりマピオンの地図!なによりマピオンの地図!
nn デイリー更新デイリー更新
nn デザインチームの熱意デザインチームの熱意
nn マピオン賞が取れるかもマピオン賞が取れるかも
![Page 30: Mashup caravan android-talks](https://reader033.vdocument.in/reader033/viewer/2022051412/549a3846ac7959482e8b5a06/html5/thumbnails/30.jpg)
使いどころ使いどころ
nn 地図メインのアプリ地図メインのアプリ
nn 地図上にルートを引く地図上にルートを引く
nn 地名を地名をVOCALOIDVOCALOIDを通して音声にするを通して音声にする
nn 地図メインでなくてもエッセンスとして地図メインでなくてもエッセンスとして
nn はてなココのようなアプリの地図面としてはてなココのようなアプリの地図面として
nn GeoGeo暗黙インテントアプリ暗黙インテントアプリ
nn GeoGeoインテントを受け付けるアプリインテントを受け付けるアプリ
![Page 31: Mashup caravan android-talks](https://reader033.vdocument.in/reader033/viewer/2022051412/549a3846ac7959482e8b5a06/html5/thumbnails/31.jpg)
使用例使用例
nn マピオンマップマピオンマップ
nn 地図ロイド地図ロイド
![Page 32: Mashup caravan android-talks](https://reader033.vdocument.in/reader033/viewer/2022051412/549a3846ac7959482e8b5a06/html5/thumbnails/32.jpg)
最後に最後に
nn Android Maps API Android Maps API は・・・は・・・
nn 成長段階成長段階
nn 今後の課題今後の課題
nn キャッシュ機能追加キャッシュ機能追加
nn AndroidAndroidに最適化した地図画像に最適化した地図画像
nn 注記が大きい地図画像選べたり注記が大きい地図画像選べたり
nn サイズ変更したり(サイズ変更したり(256x256 256x256 →→ 128x128128x128))