おまとめローンの情報サイト

490円〜のワンコイン仮想サーバー




2009年07月07日

地図アプリ入門(2) 〜 地図の拡大/縮小に対応する

【連載記事】
地図アプリ入門(1) 〜 まずは地図を表示する

本記事はAndroid上でのGoogle Mapsを使用した地図アプリを作成するに当たり範囲を絞って各機能を少しずつ積み上げ式で説明して行きたいと思います。

今回の目標は

 地図の拡大/縮小に対応する

だけです。

既に色々な方が地図表示に関する解説を公開されておりますので、今更の感はありますがお付き合いください。

それでは本題に入りたいと思います。
まず開発環境と今回の具体的目的を設定します。

【開発環境】
 ・Java Development Kit 6 Update 13
 ・Eclipse 3.4 + プレアディス(日本語環境)
 ・Android SDK 1.5 Release 2
 ・Android Development Toot Kit 0.9.1(Eclipseプラグイン)

【具体的目標】
 ・地図の拡大/縮小を行うためのズームコントローラを表示する。
 ・ズームコントローラの操作に従い地図を拡大縮小する。

次に、開発手順を見ていきます

【開発手順】
1.プロジェクトの準備
 
前回までに作成したEclipseプロジェクトに追加する形で作業を進めますので、以下のファイルを取得してください。とりあえず展開は不要です。

 MapSample.zip

展開したら、Eclipseでプロジェクトのインポートをします。
インポートはEclipseのメニューから以下を選択します。

[ファイル] - [インポート]

表示された「インポート」の選択画面で以下を選択し、「次へ」ボタンを押下します。

「既存プロジェクトをワークスペースへ」

mapsample2-2.PNG

表示された「プロジェクトのインポート」画面でダウンロードしたファイルを選択し、「完了」ボタンを押下してください。

mapsample2-3.PNG

注意点は、「アーカイブファイルの選択」の方を選び取得した圧縮ファイルを指定する点です。

また、読み込んだ直後では以下のファイルでエラーが発生します。

 res/layout/main.xml

これは、MapViewの属性「android:apiKey」に配布用に不正な値を入れているためです。(UTF-8のファイルにShift-JISで日本語書いていました)

どちらにしても動作確認のためにはこの部分は修正する必要がありますので、とりあえず無視してください。

2・レイアウトファイル修正

レイアウトファイルは以下のファイルになります。

 res/layout/main.xml

上記のファイルの内容は以下の通りです。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">

<com.google.android.maps.MapView
android:id="@+id/mapview"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:enabled="true"
android:clickable="true"
android:apiKey="" />
</LinearLayout>


上記のリストの最後から2行目に「Google API Key」を設定する箇所があります。

android:apiKey=""


上記の属性の値に各自取得していただいた「Google API Key」を設定する必要があります。

「Google API Key」については以下の記事を参照してください。

Android 1.5 での Maps API Keyの取得について

3.アクティビティ(画面)ソース修正

今回の目標における機能としての修正箇所は以下のソースとなります。

 src/net/arekoko/mapsample/MapSampleActivity.java

今回の修正後のソースは以下の通りとなります。

package net.arekoko.mapsample;

import android.os.Bundle;

import com.google.android.maps.GeoPoint;
import com.google.android.maps.MapActivity;
import com.google.android.maps.MapController;
import com.google.android.maps.MapView;

public class MapSampleActivity extends MapActivity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

// レイアウトリソースを元にMapViewオブジェクト取得
MapView mapview = (MapView) findViewById(R.id.mapview);

// 【今回追加】画面の縮尺を変更するズームコントローラを表示
mapview.setBuiltInZoomControls(true);

// MapViewオブジェクトからMapControllerオブジェクト取得
MapController mapctrl = mapview.getController();

// 地図の縮尺を指定
mapctrl.setZoom(16);

// 地図の中心座標を指定(横浜みなとみらい観覧車付近)
mapctrl.setCenter(new GeoPoint((int) (35.45530345132602 * 1E6),
(int) (139.6365491316008 * 1E6)));

}

@Override
protected boolean isRouteDisplayed() {
// TODO 自動生成されたメソッド・スタブ
return false;
}
}


今回修正したのは1箇所のみです。ただし、ソースコード全体が解りやすい様に日本語コメントをかなり追加しました。

修正箇所にはコメントとして【今回追加】と入れています。

そこだけ抜き出すと以下の通りです。

// 【今回追加】画面の縮尺を変更するズームコントローラを表示
mapview.setBuiltInZoomControls(true);


上記はMapViewクラスのメソッドで、ズームコントロール表示のON/OFFを制御するための物です。

ONの場合には「true」をOFFの場合には「flase」を設定します。

「true」を設定した場合には、地図をタップ(クリック)すると画面下部に「ズームコントロールバー」が表示されます。

「ズームコントロールバー」の操作による制御は全て隠蔽されており、この1行を追加するだけで地図の拡大/縮小の制御を行うことが出来ます。

4.エミュレータで動かしてみた

結果、こんな画面が表示されます。

mapsample2-1.PNG

地図をタップ(クリック)後、画面のようにズームコントロールバーが表示されます。
バーの操作をしなければ、一定時間後に自動的に消えます。

今回開発のプロジェクト一式は以下のリンクから取得可能です。

【今回のプロジェクトファイル一式】
MapSample2.zip
タグ:android map google
posted by Android at 23:26 | Comment(0) | TrackBack(0) | Google Map | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/123033515
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。