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

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




2009年07月07日

地図アプリ入門(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プラグイン)

【具体的目標】
 ・横浜みなとみらいのコスモワールドの観覧車を中心に地図を表示する
 ・地図の縮尺はJR桜木町駅が画面の端に見える程度とする

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

【開発手順】
1.プロジェクト作成

Eclipseのメニューから以下を選択する。
[ファイル] - [新規] - [プロジェクト]

mapsample1.PNG

表示された新規プロジェクト画面から以下を選択し[次へ」ボタンを押下する。
[Android] - [Androidプロジェクト]

新規Androidプロジェクトダイアログで以下の画面のように入力する。

mapsample2.PNG

注意すべき点は「リリースターゲット」です。
今回は地図を表示するのにGoogle Maps APIを使用するので[リリースターゲット」には
「Google APIs」を使用してください。

2・マニフェストファイル修正

Google Map APIを使用するには以下の設定が必要です

・Google Maps APIのライブラリ使用の宣言
・インターネットアクセスの許可設定

上記の2項目はマニフェストファイルの修正により設定します。

パッケージエクスプローラにてマニフェストファイル(AndroidManifest.xml)をダブルクリックするとAndroidマニフェストエディタが起動します。

前者の設定はマニフェストエディタ下部のタブ「アプリケーション」を選択することから始まります。

表示された画面の「Aplication Nodes」部分にある「追加」ボタンを押下すると表示される以下の画面から「Uses Library」をダブルクリックしてください。

mapsample3.PNG

戻った画面の「Aplication Nodes」に「Uses Library」が追加されていますので選択し、選択後表示されるテキストボックスで以下を入力してください。

com.google.android.maps


mapsample4.PNG

これで保存をするとライブラリ使用宣言の設定は終了です。

後者の設定はマニフェストエディタ下部のタブ「許可」を選択することから始まります。

表示された画面の「許可」部分にある「追加」ボタンを押下すると表示される以下の画面から「Uses Permission」をダブルクリックしてください。

mapsample5.PNG

戻った画面の「許可」に「Uses Permission」が追加されていますので選択し、選択後表示されるテキストボックスで以下を入力してください。

android.permission.INTERNET


これで保存をするとインターネットアクセスの許可設定は終了です。

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

レイアウトファイルに追加すべきは「MapView」に関するレイアウトの設定です。

パッケージエクスプローラにてレイアウトファイル(res/layout/main.xml)をダブルクリックするとAndroidレイアウトエディタが起動します。

事前に「TextView」が1個登録されていますが不要なので削除してください。

その後、ビューとして「MapView」を追加します。追加後のファイルの内容は以下の通りです。

<?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="取得したAPIキー" />
</LinearLayout>


「取得したAPIキー」とはGoogle Maps APIを使用するためのAPIキーで取得方法については別記事を参照してください。

この操作はエディタのタグをXMLファイル表示のほうで行ったほうが良いかと思います。

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

レイアウトファイルで追加した「MapView」を生かすには、アクティビティクラスを「MapActivity」から
派生したクラスとなるよう修正する必要があります。

修正後のソースはこちらとなります。

package net.arekoko.mapsample;

import android.os.Bundle;
import com.google.android.maps.MapActivity;

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);
}

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


extends するクラスを「Activity」から「MapActivity」へ変更しています。
それに伴い、インポートする派生元のActivityも修正しています。

あとは、「MapActivity」から派生したクラスで必須のメソッドである

 ・isRouteDisplayed

を追加していますが、この処理はデフォルトのまま弄る必要はありません。

これで、一応地図は表示することは可能です。ただし表示位置や縮尺については未設定です。

次に地図の縮尺と中心となる場所を変えてみましょう。
変えたソースは以下の通りです。

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をコントロールするためのオブジェクト取得
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;
}
}


地図の縮尺、および中心座標の設定のためにはMapViewに対する
コントロールオブジェクトをまず取得する必要があります。

コントロールオブジェクトを取得したら地図の縮尺設定と中心座標設定を行います。

今回の縮尺はレベル「16」
中心座標は「緯度:35.45530345132602」、「経度:139.6365491316008」

GeoPointに指定する座標は10万倍(1E6倍)する必要があります。

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

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

mapsample6.PNG

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

【今回のプロジェクトファイル一式】

MapSample.zip
タグ:google map android
posted by Android at 02:15 | Comment(0) | Google Map | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

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

ホームページアドレス:

コメント: [必須入力]

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


※画像の中の文字を半角で入力してください。
×

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