検索
AND検索
OR検索
トップ
|
リロード
|
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
勉強会/GoogleMap2 をテンプレートにして作成
詳細は
入会方法
をご覧下さい。
メニュー
日本Androidの会とは?
入会方法
イベント
技術資料
ワーキンググループ
支部
リリース
Japan Android Report
リンク
FAQ
権利関係
プライバシーポリシー
Twitter
公式Youtubeチャンネル
NPOサイト
最新の10件
2023-11-13
ABC2023A-pr
リリース
2023-10-13
MenuBar
入会方法
2023-09-17
ワーキンググループ/香川支部
2023-09-07
林田官呂
2023-08-19
イベント/イベント予定表
2023-06-11
日本Androidの会とは?
2023-06-01
秋葉 楓
2022-11-07
スタッフ
edit
Total:0/Today:0
開始行:
[[勉強会]]
* Androidでマップアプリ [#z7eee74b]
AndroidでGoogle Maps を使用したアプリケーションを作成して...
Androidでは、位置情報を元にしたサービスを、位置情報サービ...
** 作成するアプリケーション [#f2bb411b]
Android上に地図を表示して、タップした位置にアイコンを描画...
以下のページを参考にしながら、作成してみましょう。
http://developer.android.com/guide/tutorials/views/hello-...
** 作成手順の概略 [#x6a583fd]
アプリケーションを作成する手順の概略です。
- Google MapsのAPIキーを取得します
-- アプリに署名する証明書が必要です
- 新規のプロジェクトを作成します
-- SDK1.5ではライブラリのAdd-onが必要です
- マニフェストファイルを設定します
-- ライブラリやパーミッションの設定が必要です
- MapViewで地図を表示します
-- 取得したAPIキーを使用します
- MapActivityで地図の表示を制御します
-- ズームコントローラで地図の拡大縮小できます
- タップされた位置にアイコンを描画します
-- Overlayクラスで地図上に描画できます
** Google MapsのAPIキー取得 [#bea5b6c4]
Google MapsはGoogleが提供するWeb上のサービスです。Android...
このライブラリは、Googleが提供しているものであり、オープ...
APIキーの取得には、アプリケーションの開発時に使用する証明...
#ref(Ceart.png)
Androidのアプリケーションのパッケージには、開発者自身の証...
証明書のMD5のハッシュは、SunのJDKに含まれているkeytoolと...
> keytool -help
もし、コマンドが見つからない場合には、JDKをインストールし...
> "%JAVA_HOME%\bin\keytool" -help
...
つぎに、使用している証明書のMD5のハッシュを取ります。デバ...
- OS X ~/.android/debug.keystore
- Linux ~/.android/debug.keystore
- SDK1.1 Windows
-- Windows Vista C:\Users\%USERNAME%\AppData\Local\Androi...
-- Windows XP C:\Documents and Settings\%USERNAME%\Local ...
- SDK1.5 Windows
-- Windows Vista C:\Users\%USERNAME%\.android\debug.keyst...
-- Windows XP C:\Documents and Settings\%USERNAME%\.andro...
keytoolの-listコマンドで証明書の一覧を表示します。例えば...
> keytool -list -keystore C:\Users\%USERNAME%\.android\...
キーストアのパスワードを入力してください: android
キーストアのタイプ: JKS
キーストアのプロバイダ: SUN
キーストアには 1 エントリが含まれます。
androiddebugkey, 2008/10/14, PrivateKeyEntry,
証明書のフィンガープリント (MD5): 4B:28:72:FB:D3:2C:86:D...
ここで表示されたフィンガープリントを、以下のページで入力...
- http://code.google.com/intl/ja/android/maps-api-signup....
#ref(AndroidMapsAPI.jpg)
生成したフィンガープリントは、後で使用するので、控えてお...
#ref(AndroidMapsAPIKey.jpg)
アプリケーションの署名は、端末のインストール時と、マーケ...
#ref(Sign.png)
* プロジェクトの作成 [#yed9820e]
新規のプロジェクトを作成します。
- File New => New => Android Project
-- 今回はSDK1.1を選択します。
#ref(NewAndroidProject.jpg)
* アイコンを変更します。 [#uc7da050]
アイコンは、ユーザーが認識可能なアプリケーションの識別子...
res/drawable/icon.pngをペイントなどで編集します。
* マニフェストファイルの設定 [#i2b1bcd4]
地図を使用するには、マニフェストのapplication内にライブラ...
- <uses-library android:name="com.google.android.maps" />
#ref(AndroidManifest.jpg)
また、インターネットに接続するために、同じくマニフェスト...
- <uses-permission android:name="android.permission.INTER...
#ref(AndroidManifestPermission.jpg)
* レイアウトの作成 [#xbd608a8]
- レイアウトリソースファイル(res/layout/main.xml)を以下...
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.co...
android:id="@+id/mainlayout"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<com.google.android.maps.MapView
android:id="@+id/mapview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true"
android:apiKey="取得したAPI Key"
/>
<LinearLayout
android:id="@+id/zoomview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@id/mapview"
android:layout_centerHorizontal="true"
/>
</RelativeLayout>
ここでは、相対レイアウトの中に、MapViewと、リニアレイアウ...
* MapViewクラスを作成する [#qf1bcee7]
- MapViewクラスを表示して、MapActivityを継承させます。こ...
public class HelloMapView extends MapActivity
- Add unimplement methodを使用して、isRouteDisplayedメソ...
@Override
protected boolean isRouteDisplayed() {
// TODO Auto-generated method stub
return false;
}
ここで、アプリケーションを実行して、地図が表示されること...
- SDKにあらかじめインストールされているMapアプリケーショ...
-- 表示されてなけば、ネットワークの設定などOSの設定を確認...
- MapのAPIキーが正しく入力されているか確認する。APIキーの...
- 使用している証明書が正しいか確認する。Windowsでは、SDK1...
* ズームコントローラを配置する。 [#be9273ca]
コンストラクタを以下のように変更します。
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
LinearLayout linearLayout;
MapView mapView;
ZoomControls mZoom;
linearLayout = (LinearLayout) findViewById(R.id.z...
mapView = (MapView) findViewById(R.id.mapview);
mZoom = (ZoomControls) mapView.getZoomControls();
linearLayout.addView(mZoom);
}
実行して、地図を表示してみましょう。タップするとズームコ...
* 初期値を設定する [#w65f3036]
以下のフィールドを定義します。
// ログ出力用のタグ
static final String TAG = "HelloMapActivity";
// 地図の初期値
static final int INITIAL_ZOOM_LEVE = 16;
static final int INITIAL_LATITUDE = 35156807;
static final int INITIAL_LONGITUDE = 136925412;
コンストラクタに最後に、以下の行を追加します。
// 位置とズームレベルの初期状態を設定する
MapController controller = mapView.getController();
GeoPoint point =
new GeoPoint(INITIAL_LATITUDE, INITIAL_LONGIT...
controller.setCenter(point);
controller.setZoom(INITIAL_ZOOM_LEVE);
実行してみましょう。
* タップされた位置にアイコンを描画する [#nb14aa61]
Overlayクラスを使用して、地図上に描画できます。
コンストラクタの最後に以下の呼び出しを追加します。
// イメージを地図上に表示する
setOverlay(point);
以下のプライベートメソッドを定義します。
private void setOverlay(GeoPoint point) {
// Overlayクラスを生成する
Bitmap icon = BitmapFactory.decodeResource(getRes...
R.draw...
IconOverlay overlay = new IconOverlay(icon, point);
// 生成したOverlayクラスを追加する
MapView map_view = (MapView) findViewById(R.id.ma...
List<Overlay> overlays = map_view.getOverlays();
overlays.add(overlay);
}
// 地図上に表示されるオーバーレイ
private class IconOverlay extends Overlay {
// 描画するアイコン
Bitmap mIcon;
int mOffsetX;
int mOffsetY;
// アイコンを表示する位置
GeoPoint mPoint;
IconOverlay(Bitmap icon, GeoPoint initial) {
// アイコンと、アイコンの中心のオフセット
mIcon = icon;
mOffsetX = 0 - icon.getWidth() / 2;
mOffsetY = 0 - icon.getHeight() / 2;
mPoint = initial;
}
// 地図のタップ時に呼び出される
@Override
public boolean onTap(GeoPoint point, MapView mapV...
// タップされた位置を記録する
mPoint = point;
Log.i(TAG, "Point = " + point.getLatitudeE6()...
return super.onTap(point, mapView);
}
// 地図の描画時に、shadow=true, shadow=falseと2回...
@Override
public void draw(Canvas canvas, MapView mapView,
boolean shadow) {
super.draw(canvas, mapView, shadow);
if (!shadow) {
// 地図上の場所と、描画用のCanvasの座標の...
Projection projection = mapView.getProjec...
Point point = new Point();
projection.toPixels(mPoint, point);
point.offset(mOffsetX, mOffsetY);
// アイコンを描画
canvas.drawBitmap(mIcon, point.x, point.y...
}
}
};
実行してみましょう。
----
[[勉強会]]
終了行:
[[勉強会]]
* Androidでマップアプリ [#z7eee74b]
AndroidでGoogle Maps を使用したアプリケーションを作成して...
Androidでは、位置情報を元にしたサービスを、位置情報サービ...
** 作成するアプリケーション [#f2bb411b]
Android上に地図を表示して、タップした位置にアイコンを描画...
以下のページを参考にしながら、作成してみましょう。
http://developer.android.com/guide/tutorials/views/hello-...
** 作成手順の概略 [#x6a583fd]
アプリケーションを作成する手順の概略です。
- Google MapsのAPIキーを取得します
-- アプリに署名する証明書が必要です
- 新規のプロジェクトを作成します
-- SDK1.5ではライブラリのAdd-onが必要です
- マニフェストファイルを設定します
-- ライブラリやパーミッションの設定が必要です
- MapViewで地図を表示します
-- 取得したAPIキーを使用します
- MapActivityで地図の表示を制御します
-- ズームコントローラで地図の拡大縮小できます
- タップされた位置にアイコンを描画します
-- Overlayクラスで地図上に描画できます
** Google MapsのAPIキー取得 [#bea5b6c4]
Google MapsはGoogleが提供するWeb上のサービスです。Android...
このライブラリは、Googleが提供しているものであり、オープ...
APIキーの取得には、アプリケーションの開発時に使用する証明...
#ref(Ceart.png)
Androidのアプリケーションのパッケージには、開発者自身の証...
証明書のMD5のハッシュは、SunのJDKに含まれているkeytoolと...
> keytool -help
もし、コマンドが見つからない場合には、JDKをインストールし...
> "%JAVA_HOME%\bin\keytool" -help
...
つぎに、使用している証明書のMD5のハッシュを取ります。デバ...
- OS X ~/.android/debug.keystore
- Linux ~/.android/debug.keystore
- SDK1.1 Windows
-- Windows Vista C:\Users\%USERNAME%\AppData\Local\Androi...
-- Windows XP C:\Documents and Settings\%USERNAME%\Local ...
- SDK1.5 Windows
-- Windows Vista C:\Users\%USERNAME%\.android\debug.keyst...
-- Windows XP C:\Documents and Settings\%USERNAME%\.andro...
keytoolの-listコマンドで証明書の一覧を表示します。例えば...
> keytool -list -keystore C:\Users\%USERNAME%\.android\...
キーストアのパスワードを入力してください: android
キーストアのタイプ: JKS
キーストアのプロバイダ: SUN
キーストアには 1 エントリが含まれます。
androiddebugkey, 2008/10/14, PrivateKeyEntry,
証明書のフィンガープリント (MD5): 4B:28:72:FB:D3:2C:86:D...
ここで表示されたフィンガープリントを、以下のページで入力...
- http://code.google.com/intl/ja/android/maps-api-signup....
#ref(AndroidMapsAPI.jpg)
生成したフィンガープリントは、後で使用するので、控えてお...
#ref(AndroidMapsAPIKey.jpg)
アプリケーションの署名は、端末のインストール時と、マーケ...
#ref(Sign.png)
* プロジェクトの作成 [#yed9820e]
新規のプロジェクトを作成します。
- File New => New => Android Project
-- 今回はSDK1.1を選択します。
#ref(NewAndroidProject.jpg)
* アイコンを変更します。 [#uc7da050]
アイコンは、ユーザーが認識可能なアプリケーションの識別子...
res/drawable/icon.pngをペイントなどで編集します。
* マニフェストファイルの設定 [#i2b1bcd4]
地図を使用するには、マニフェストのapplication内にライブラ...
- <uses-library android:name="com.google.android.maps" />
#ref(AndroidManifest.jpg)
また、インターネットに接続するために、同じくマニフェスト...
- <uses-permission android:name="android.permission.INTER...
#ref(AndroidManifestPermission.jpg)
* レイアウトの作成 [#xbd608a8]
- レイアウトリソースファイル(res/layout/main.xml)を以下...
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.co...
android:id="@+id/mainlayout"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<com.google.android.maps.MapView
android:id="@+id/mapview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true"
android:apiKey="取得したAPI Key"
/>
<LinearLayout
android:id="@+id/zoomview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@id/mapview"
android:layout_centerHorizontal="true"
/>
</RelativeLayout>
ここでは、相対レイアウトの中に、MapViewと、リニアレイアウ...
* MapViewクラスを作成する [#qf1bcee7]
- MapViewクラスを表示して、MapActivityを継承させます。こ...
public class HelloMapView extends MapActivity
- Add unimplement methodを使用して、isRouteDisplayedメソ...
@Override
protected boolean isRouteDisplayed() {
// TODO Auto-generated method stub
return false;
}
ここで、アプリケーションを実行して、地図が表示されること...
- SDKにあらかじめインストールされているMapアプリケーショ...
-- 表示されてなけば、ネットワークの設定などOSの設定を確認...
- MapのAPIキーが正しく入力されているか確認する。APIキーの...
- 使用している証明書が正しいか確認する。Windowsでは、SDK1...
* ズームコントローラを配置する。 [#be9273ca]
コンストラクタを以下のように変更します。
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
LinearLayout linearLayout;
MapView mapView;
ZoomControls mZoom;
linearLayout = (LinearLayout) findViewById(R.id.z...
mapView = (MapView) findViewById(R.id.mapview);
mZoom = (ZoomControls) mapView.getZoomControls();
linearLayout.addView(mZoom);
}
実行して、地図を表示してみましょう。タップするとズームコ...
* 初期値を設定する [#w65f3036]
以下のフィールドを定義します。
// ログ出力用のタグ
static final String TAG = "HelloMapActivity";
// 地図の初期値
static final int INITIAL_ZOOM_LEVE = 16;
static final int INITIAL_LATITUDE = 35156807;
static final int INITIAL_LONGITUDE = 136925412;
コンストラクタに最後に、以下の行を追加します。
// 位置とズームレベルの初期状態を設定する
MapController controller = mapView.getController();
GeoPoint point =
new GeoPoint(INITIAL_LATITUDE, INITIAL_LONGIT...
controller.setCenter(point);
controller.setZoom(INITIAL_ZOOM_LEVE);
実行してみましょう。
* タップされた位置にアイコンを描画する [#nb14aa61]
Overlayクラスを使用して、地図上に描画できます。
コンストラクタの最後に以下の呼び出しを追加します。
// イメージを地図上に表示する
setOverlay(point);
以下のプライベートメソッドを定義します。
private void setOverlay(GeoPoint point) {
// Overlayクラスを生成する
Bitmap icon = BitmapFactory.decodeResource(getRes...
R.draw...
IconOverlay overlay = new IconOverlay(icon, point);
// 生成したOverlayクラスを追加する
MapView map_view = (MapView) findViewById(R.id.ma...
List<Overlay> overlays = map_view.getOverlays();
overlays.add(overlay);
}
// 地図上に表示されるオーバーレイ
private class IconOverlay extends Overlay {
// 描画するアイコン
Bitmap mIcon;
int mOffsetX;
int mOffsetY;
// アイコンを表示する位置
GeoPoint mPoint;
IconOverlay(Bitmap icon, GeoPoint initial) {
// アイコンと、アイコンの中心のオフセット
mIcon = icon;
mOffsetX = 0 - icon.getWidth() / 2;
mOffsetY = 0 - icon.getHeight() / 2;
mPoint = initial;
}
// 地図のタップ時に呼び出される
@Override
public boolean onTap(GeoPoint point, MapView mapV...
// タップされた位置を記録する
mPoint = point;
Log.i(TAG, "Point = " + point.getLatitudeE6()...
return super.onTap(point, mapView);
}
// 地図の描画時に、shadow=true, shadow=falseと2回...
@Override
public void draw(Canvas canvas, MapView mapView,
boolean shadow) {
super.draw(canvas, mapView, shadow);
if (!shadow) {
// 地図上の場所と、描画用のCanvasの座標の...
Projection projection = mapView.getProjec...
Point point = new Point();
projection.toPixels(mPoint, point);
point.offset(mOffsetX, mOffsetY);
// アイコンを描画
canvas.drawBitmap(mIcon, point.x, point.y...
}
}
};
実行してみましょう。
----
[[勉強会]]
ページ名: