Androidで地図に画像を配置する方法

Google Mapsのように地図のある位置に画像を貼付ける方法をご紹介します。

AndroidにはOverlayというAPIが準備されていますのでそれを利用します。

地図にOverlayで画像を配置する前準備として、OverlayControllerを取得する必要があります。

public void onCreate(Bundle icicle) {
  super.onCreate(icicle);
  MapView mv = new MapView(this);
  setContentView(mv);
  OverlayController oc = mv.createOverlayController();
}

このOverlayControllerがOverlayの管理を担ってくれます。
あとはoc.add(…)でOverlayを追加していくだけです。

OverlayControllerに登録するOverlayを定義する。
MapがレンダリングされるたびにOverlayのdrowメソッドがコールされるので、drowメソッドを自分好みに定義する必要があります。今回は、地図上(画面上ではなく)で常に一定の位置に画像を配置するようにしてみます。

class GraphicOverlay extends Overlay {
  private final BitmapDrawable bmp;
  private final int width, height;
  private final int hw, hh;//half of width, height
  private final Point p;
 
  public GraphicOverlay(Drawable d, Point p) {
    bmp = (BitmapDrawable) d;
    this.p = p;
    width = bmp.getIntrinsicWidth();
    height = bmp.getIntrinsicHeight();
    hw = width / 2;
    hh = height / 2;
  }
 
  public void draw(Canvas canvas, PixelCalculator calculator, boolean shadow) {
    calculator.getPointXY(p, sXYCoords);
    int x = sXYCoords[0];
    int y = sXYCoords[1];
    bmp.setBounds(x - hw, y - hh, x + hw, y + hh);
    bmp.draw(canvas);
  }
}

コンストラクタの第１引数(Drawable d)は画像です。
第２引数(Point p)は配置する場所です。この場所はGPS上の位置です。
コンストラクタは一度しか呼び出されませんので、ここで決定できる値は全部計算しておきます。ハードウェアを意識したコーディングってやつです。

地図がレンダリングされるたびにこのdrawが呼び出されます。つまり、指定した地図上の位置に常に画像を配置するには、指定した位置が画面上のどこにあるかを計算し、そこに画像を配置します。複雑ですがそういう複雑な計算はAPIが準備されていて楽になっています。

calculator.getPointXY(p, sXYCoords);

このメソッドで地図上の位置から画面上の位置を取得する事ができます。
pはコンストラクタで指定した地図上の位置で、sXYCoordsはint配列でOverlayのインスタンスフィールドで定義されています。一時変数として使える配列です。ここに画面上の位置が格納されます。
あとは、このsXYCoordsを利用して画像を配置します。

本筋からは外れますが、Javaではフィールドへのアクセスよりローカル変数へのアクセスの方が高速なのでdrawのような何度も呼び出される関数の場合はできるだけフィールドを利用しない方が良いと思います。Androidの「Writing Efficient Android Code」にもそう書いてますね。

脱線しました。
さて、ようやくOverlayをaddして完成です。

OverlayControllerにOverlayをaddします。

OverlayController oc = mv.createOverlayController();
Drawable icon = getResources().getDrawable(R.drawable.icon);
Point point = new Point(0, 0);
oc.add(new GraphicOverlay(icon, point), true);

画像を準備するのが面倒なのでres/drawable/icon.pngを利用します。
表示する場所は緯度０度、経度０度です。

緯度と経度が現在表示している画面のどの位置にあるのかを計算するのが複雑そうに思いましたがAPIが準備されていて非常に楽でした。さすがGoogleです。感謝。

• G1でTouchRangeを動かしてみた
• AndroidでWebマッシュアップ開発の基礎
• ET2008で喋ってきました
• ASCII.technologiesのAndroid特集に寄稿しました
• トラックボールのない端末でもカーソルを簡単に移動する方法 [Xperia_Report]
• Simejiを便利に使うための設定 [Xperia_Report]
• JJUGのCross Community Conference 2008 Fallで話してきました