2011年7月26日 星期二

Android 上使用 Google Map API

當新建一個 Android 的專案時,可以選擇要使用的 API 版本,要注意的是一般的 Android API 版本並不包含 Google Map API,所以當需要使用到 Google Map API 時則需要選擇 Target name 為 Google APIs 的選項,並配合所需要的版本,使用前還必須申請一個 Android Map API Key。



申請 Android Map API Key

申請 Key 必須要有系統的證明書以及一個 Google 帳號,測試用的可以利用 Debug 的證書,不過未來如果需要發佈的話,則需要一份利用所要發佈的程式產生的 MD5 證書,並利用此證明書去申請 Key 之後才能發佈。
詳細申請步驟可以參考 Google 說明頁面 : Obtaining a Maps API Key

Debug 證書的路徑在 Eclipse 中選擇 Windows > Preference > Android > Build,其中的 Default debug keystore 的值就是 debug.keystore 的路徑。得知此路徑後就可以利用 keytool 指令取得MD5值,指令為 keytool -list -keystore debug.keysotre

接著利用剛剛取得的 MD5 碼,可以至 Google Map API key 申請頁面上申請 key,只要將取得的 MD5 碼填入並按下產生即可取得。



Google Map API 簡介

Google Map API 中有幾個重要也常用到的功能,分別為:

  • MapActivity : 一般來說 Android 程式的頁面都會繼承 Activity 類別,但是要使用 Google Map 的功能時,則必須繼承這個 MapActivity 類別,並且在 onCreate() 中實做一個 MapView 實例。
  • MapView : 用於顯示地圖的 View 元件。
  • MapController : 用來控制地圖的縮放移動等動作。
  • Overlay : 用來顯示地圖上可繪製的物件。
  • GeoPoint : 包含了經緯度的物件。


建立基本地圖

因為使用 Google Map API 必須使用到網路,所以必須在 AndroidManifest.xml 中增加網路存取的權限,並且須定義使用 com.google.android.maps 這個 package,如下原始碼。
<uses-library android:name="com.google.android.maps" />
因為顯示為 MapView ,所以可以在 main.xml 將這個 MapView 加入,並將取得的 key 填入,基本的 main.xml 如下 :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
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="07MiAWWKO9Na0Aa8sf9hsd6uhZNXjrRwZU2zyGQ"
/>
</RelativeLayout>
或是直接利用程式碼建立 MapView。
MapView mMapView = new MapView(this, "API Key");
在建立 MapView之前,必須先建立起 MapActivity,再經由覆寫 MapActivity的 onCreat()方法建立MapView,之後就可以做一些地圖的設定,像是透過 setBuiltInZoomControls 設定地圖是否可以縮放,還有當地圖的顯示方式可以有三種,交通模式、衛星模式還有街景模式,分別為 setTraffic、setSatellite 以及 setStreeView 三個方法;最後再建立 MapController,而建立 MapController 物件可以利用下面方式產生 :
mMapController = mMapView.getController();
MapController 除了可以控制地圖縮放倍數外,也可以利用 animateTo(GeoPoint)的方法將地圖定位至 GeoPoint 的位置。

以下為完整範例原始碼 :

AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.nchu.exMap"
android:versionCode="1"
android:versionName="1.0">
<uses-sdk android:minSdkVersion="10" />
<uses-permission android:name="android.permission.INTERNET" />

<application android:icon="@drawable/icon" android:label="@string/app_name">
<uses-library android:name="com.google.android.maps" />
<activity android:name=".exMap"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>

</application>
</manifest>


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_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true"
android:apiKey="07MiAWWKO9Na0Aa8sf9hsd6uhZNXjrRwZU2zyGQ"
/>
</LinearLayout>


exMap.java

package com.nchu.exMap;

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

import android.os.Bundle;

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

MapView mMapView = (MapView)findViewById(R.id.mapview);
mMapView.setBuiltInZoomControls(true);
mMapView.setTraffic(false);
MapController mMapController = mMapView.getController();
mMapController.setZoom(17);
GeoPoint mGeoPoint = new GeoPoint(24121194,120675526);
mMapController.animateTo(mGeoPoint);
}

@Override
protected boolean isRouteDisplayed() {
// TODO Auto-generated method stub
return false;
}
}



實際執行畫面


一般地圖



移動




縮放

0 意見:

張貼留言

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Powered by Blogger