sos の 作業メモ

プログラミングや英会話学習、マイルや旅行、日常生活など。最近はWebFormなASP.NETのお守りがお仕事です。

日々の生活にhappyをプラスする｜ハピタス Ｇポイント

Google Maps Android API v2 その３ Drawing on the Map

android GoogleMaps

前回の続き

Markers

地図の上に貼り付くIcon。clickイベントを受信したり、ドラッグが可能になったりする便利な奴

Markerを追加する

以下の簡単なコードで、経度0、緯度0の地点に タップすると"Hello world"の文字を表示する標準のマーカーが表示される。

GoogleMap map = ((MapFragment) getFragmentManager().findFragmentById(R.id.map)).getMap();
map.addMarker(new MarkerOptions()
    .position(new LatLng(0, 0))
    .title("Hello world"));

マーカーをカスタマイズする

マーカーはいろいろとカスタマイズが可能。以下は設定可能な項目

  • Position - 座標値。必須の項目。
  • Title - ユーザーがマーカーをタップしたときに表示されるタイトル文字列
  • Snippet - タイトルの下に表示される付加的な文字列
  • Draggable - trueでマーカーがドラッグできるようになる。デフォルトはfalse
  • Visible - falseでマーカーが表示されなくなる。デフォルトはtrue
  • Anchor - マーカーの画像のどこを座標値とするかの設定。デフォルトは画像の下端中央
  • Icon - マーカーの画像。一度作ったマーカーのIconは変更できない

以下、メルボルンの位置に、タイトルとスニペットを設定したマーカーを追加する例

static final LatLng MELBOURNE = new LatLng(-37.81319, 144.96298);
Marker melbourne = map.addMarker(new MarkerOptions()
    .position(MELBOURNE)
    .title("Melbourne")
    .snippet("Population: 4,137,400"));

デフォルトマーカーを変更する

マーカーに別の画像を設定することも可能。com.google.android.gms.maps.model.BitmapDescriptorFactoryのdefaultMarker()メソッドを使うと、簡単にデフォルトマーカーの色違いの画像を生成できる。

Marker melbourne = map.addMarker(new MarkerOptions()
    .position(MELBOURNE)
    .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ROSE))

BitmapDescriptorFactoryには、他にもBitmapDescriptorを返す便利なメソッドがある

  • fromAsset(String assetName) - assets ディレクトリのimageから生成
  • fromBitmap (Bitmap image) - Bitmapから作成
  • fromFile (String path) - image fileから作成
  • fromResource (int resourceId) - Resourceから作成

Info windows

ユーザーがマーカーをタップした際にはInfo windowが表示される。 マーカーにタイトルやSnippetが設定されている時は、デフォルトのInfo windowはそれらの内容の表示となる。 プログラムからInfo windowを表示する場合は、Marker#showInfoWindow()を呼び出す。

マップ上に一度に表示されるInfo windowは一つだけで、端末のスクリーンの中央の辺りに、マーカーの上側に表示される。

Info windowの内容やデザインをカスタマイズする場合、インターフェースのInfoWindowAdapterを実装したオブジェクトを、GoogleMap.setInfoWindowAdapter()で設定してやる。InfoWindowAdapterは、開発者によって実装されるべき２つのメソッドを持つ。最初にgetInfoWindow(Marker) が呼ばれ、結果がnullならgetInfoContents(Marker)が呼ばれる。両方がnullを返す場合は、デフォルトのInfo windowが使用される。

Info windowは、生きているViewではなく、画像の如く描画されている。これは、Info windowを表示したあとで、Viewの内容を変更できないことを意味する。更新したいならshowInfoWindow()を呼ぶしかない。
また、Viewとしてのジェスチャへの応答は行われないが、後述のクリックイベントには応答するようになっている。

Marker click events

OnMarkerClickListerをGoogleMapオブジェクトにセットすることで、マーカーへのクリックイベントを受け取ることができる。イベントハンドラでfalseを返すと、GoogleMapオブジェクトによってデフォルトの処理が行われる。

Marker drag events

OnMarkerDragListenerをセットすることで、マーカーのドラッグイベントを受け取ることができる。ドラッグ可能なマーカーをロングプレスすると、マーカーが移動可能な状態となる。ドラッグ開始/ドラッグ中/ドラッグ終了のイベントハンドラが定義されている。

Info window click events

OnInfoWindowClickListenerをセットすることで、Info windowのクリックイベントを受け取ることができる。

上でも述べたように、Info windowはイメージのように扱われるため、Info windowの中にボタンやチェックボックス、InputText等のコンポーネントを配置しても、それらのイベントをきちんと区別して受け取ることができないことに注意する。
インタラクティブなコンポーネントをInfo windowに配置しないこと。

Lines,Polygons & Circles

Google Maps API は、地図に図形を追加する簡単な方法を提供している

Polylines

Polylineは、繋がった線分のまとまりを地図に設定するためのクラス。PolylineOptionsで座標値を設定し、GoogleMap.addPolyline(PolylineOptions)でGoogleMapオブジェクトに追加する

PolylineOptions rectOptions = new PolylineOptions()
    .add(new LatLng(37.35, -122.2))
    .add(new LatLng(37.35, -122.0));
Polyline polyline = map.addPolyline(rectOptions);

Polygons

PolygonはPolylineに似た、閉じた領域を定義するためのクラス。PolygonOptionsで座標値を設定し、GoogleMap.addPolygon(PolygonOptions)でGoogleMapオブジェクトに追加する

PolygonOptions rectOptions = new PolygonOptions()
    .add(new LatLng(37.35, -122.0),
        new LatLng(37.45, -122.0),
        new LatLng(37.45, -122.2),
        new LatLng(37.35, -122.2),
        new LatLng(37.35, -122.0));
Polygon polygon = map.addPolygon(rectOptions);

Polygon Auto-Completion

Polygonの最初と最後の点が重なっていなくても、閉じた図形となるように、自動的に最後の点から最初の点が接続される。

Create a hollow Polygon

ドーナツのような中空の領域を定義したいときは、PolygonOptions#addHole()を使うと良い。

Circles

Circleは、円を地図に設定するためのクラス。CircleOptionsで中心座標と半径のmを設定し、GoogleMap.addCircle(CircleOptions)でGoogleMapオブジェクトに追加する

CircleOptions circleOptions = new CircleOptions()
    .center(new LatLng(37.4, -122.1))
    .radius(1000); 
Circle circle = map.addCircle(circleOptions);

Customizing Appearances

Polyline,Polygon,Circleのオブジェクトには、マップに追加する前や追加した後に、見た目を変更するためのプロパティが用意されている

Stroke Color

線の色。32bitのARGBで指定する。デフォルトはColor.BLACK

Fill Color

PolygonやCircleの塗りつぶし色。デフォルトはColor.TRANSPARENT

Stroke Width

線の太さ。pxで指定するため、ズームしても拡大されることはない。デフォルトは10pixels

Geodesic segments

PolylineとPolygon用のプロパティ。二点間の線を、直線で描くか、地球の表面に沿った曲線で描くかを設定する。デフォルトはfalseで、直線で描画される

Z-Index

図形の描画順を指定。数字が大きいほど手前になる。デフォルトは０

Visibility

地図に図形を表示するかどうか。単に表示/非表示を切り替えるだけで、地図から図形を取り除くには、remove()メソッドを呼ぶ必要がある

いやぁ、ちゃんと読むと思ってたより量が多い感じがします。API Demoに辿り着けるのはいつになることやら…

次回へ続く