Home > android > Androidで地図アプリケーションを作ってみた

Androidで地図アプリケーションを作ってみた

追記（2008.02.23）

m5-rc14版は「Androidの地図アプリをm5-rc14っぽくしてみた」をご覧下さい。


Androidで動く地図とWebAPIを連携したアプリケーションを作りました。
いわゆるGoogle MapsのAndroid版です。

これは何？

ホットペッパーAPIを利用して、現在地の周辺の店を表示します。
さらに、現在地周辺のランドマークを表示します。

使い方

Hキーを押せばヘルプを表示できます。

Key Description
I, Volume UP ズームイン
O, Volume Down ズームアウト
←,↑,→,↓ 移動（タッチパネルでも可）
0,1,2,… 店の番号を入力
DEL 入力した番号をキャンセル
Space 入力した番号の店に移動して表示
L, R, H 表示対象のリスト、データを再取得、ヘルプ

カーソルで移動して、中心にいるアンドロイドの周辺の情報を取得します。

スクリーンキャスト

こんな感じで動きます。

ちょっとだけ詳しい説明

ヘルプの説明でもしましたが、Lキーを押すと、現在表示中の店の一覧を表示できます。

数字を入力すると、タイトルに店の名前が表示されます。
詳しい情報を表示したいときは、さらにスペースを押します。

ちょっと技術的なこと
地図上にマーカーを表示する

地図上にGoogle Mapsのようなマーカーを表示するには、PNG形式では透明部分が白くなってしまいます。
GIFなら透明部分も白くならず透明のまま表示できました。

地図上に複数の画像を表示する

以前のエントリ「Androidで地図に画像を配置する方法」で説明した方法で基本的に問題ありません。
しかし、複数表示する場合はこうします。
前回のエントリでは、

oc.add(new GraphicOverlay(icon, point), true);

としていましたが、複数のOverlayを重ねる場合は、

oc.add(new GraphicOverlay(icon, point), false);

とします。第二引数のbooleanに注意です。

文字を表示する

このアプリケーションではマーカーに数字が付いています。これは数字の付いていないマーカーを用意して、表示時に数字を重ねています。つまり、Overlayのdrawメソッドに細工を加えます。

public void draw(Canvas canvas, PixelCalculator calculator, boolean shadow) {
  int xy[] = new int[2];// 0:x, 1:y
  calculator.getPointXY(p, xy);
  bmp.setBounds(xy[0] - hw, xy[1] - height, xy[0] + hw, xy[1]);
  bmp.draw(canvas);
  canvas.drawText(_id, xy[0] - text_left, xy[1] - text_top, paint);
}

drawTextで文字を書き加えています。
文字の位置を微調整するのが面倒ですが…。

Download

いつも通りeclipseのプロジェクトも公開しますが、各WebAPIを利用するための認証キーは非公開です。ご自分のキーを入力して下さい。
入力箇所は「com.adamrocker.android.locally.AroundHere.java」のインスタンスフィールドです。

private String HOTPEPPER_KEY = "ホットペッパーのキー";
private String YAHOO_KEY = "ヤフーのキー";

それぞれのキーはリクルートWEBサービスとYahoo!デベロッパーネットワークで取得して下さい。

Download the around_here.zipm5-rc14バージョンをご利用下さい。

さいごに

地図上に追加したOverlayにクリックイベントとか付けたい。
今は、タップした場所をGPSデータに変換して、画像との衝突判定を加える必要があるのかな？
実装を考えただけでも面倒そうです…。
＃久々にプログラムする時間ができた、ずいぶん感が鈍っていた。

関連のありそうなエントリ

Comments:5

安藤恐竜 08-02-11 (月) 10:08

すごっ。仕事速いですねぇ。電話をかけにいければAndroidぽくてステキと思ったら、HotpepperのAPIは電話番号を返さないんですね。

……真似っこして、ぐるなびでやってみようかな……

adamrocker 08-02-11 (月) 18:04

ども。ようやくプライベートの時間を少し取れるようになったので、久々に作ってみました。
完全にEASTさんの再発明ですが、リハビリには良いネタかと。地図アプリも作ったことなかったですし。
ぐるなびもAPI公開してるんですね？知らなかった。電話を掛けるアプリも作った事無いので私も挑戦してみようかな。

安藤恐竜 08-02-11 (月) 21:00

ぐるなびAPI、住所登録が必要だったので一瞬躊躇しましたが、やっちゃいました。Adamrockerさんのコード、丸パクリですみません。XMLパーサの調整すればもっと色々と情報が取れるんですけど、面倒なので中途半端に公開しちゃいました。うふふ。

adamrocker 08-02-12 (火) 0:06

遠慮なくどんどんパクって下さいw
んでもって、僕もぐるなびAPIで作ってみました。
電話をかける部分が簡単過ぎて拍子抜けしましたが、コードを少し整理したので、ちょっとスッキリ。

androidzaurus 08-06-02 (月) 14:51

想像ですけど。PacketVideo製のcodec libraryを初期化するんじゃないでしょうか？

Comment Form
Remember personal info

*
To prove that you're not a bot, enter this code
Anti-Spam Image

Trackbacks:2

Trackback URL for this entry
http://www.adamrocker.com/blog/182/android_hotpepper_yahoo_web_api.html/trackback/
Listed below are links to weblogs that reference
Androidで地図アプリケーションを作ってみた from throw Life
trackback from Android Zaurus 08-02-11 (月) 13:23

Yet Another Hotpepper Applet f…

Adamrocker posted a new applet on his blog article, An implementation of map applet (more…)

trackback from Android Zaurusはてな館 08-02-11 (月) 13:57

AndroidでHotpepperとYahoo! Mapと、…

AndroidのAppletを驚異的なスピードで書き続けているAdamrockerさんが、今度はHotpepperとYahoo! MapのWeb APIを使ったApp (more…)

Home > android > Androidで地図アプリケーションを作ってみた

Pages
Recent Entries
Categories
Archives
Search
Feeds
Meta

Return to page top