第四堂（2）设计地图应用程式 – Google Maps Android API v2
最后更新于：2022-04-01 00:53:09
地圖已經是非常普遍的使用在各種應用程式，Google在2013年2月，為Android平台推出Google Maps Android API v2，使用全新的設計方式，改良地圖元件的畫面與效率，增加3D建築物，還有簡化的繪圖API。Android已經在2013年4月停止舊的API，所以這裡只會說明Google Maps Android API v2的設計方式。
Google Maps Android API v2包含在「Google Play Service SDK」，目前不能在模擬裝置中測試地圖應用程式，所以必需準備好實體裝置，接下來的應用程式必須安裝在實體裝置執行測試。
這一章為記事資料加入地圖元件的應用，如果使用者在記事資料儲存座標的資料，就可以啟動地圖元件顯示儲存的地點：
[](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-17_55d1b9e0f329b.png)
[](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-17_55d1b9e296382.png)
## 13-1 建立地圖元件
地圖元件從網路下載所有的資料，包含地圖、接道名稱、衛星空照與地形。應用程式必須申請專用的「Google Maps API Key」，才可以正確的下載資料。使用Android Studio可以簡化地圖應用程式的開發，在開始設計地圖應用程式之前，先依照下列的的步驟，確認已經安裝好「Google Play services」SDK：
1. 啟動Android Studio並開啟記事應用程式。
2. 選擇功能表「Tools -> Android -> SDK Manager」。
3. 在Android SDK Manager視窗，檢查「Extras -> Google Play services」是否已經安裝。如果還沒有安裝的話，勾選並執行安裝的工作：[](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-17_55d1b9eaf02ab.png)
依照下列的的步驟，為記事應用程式新增一的地圖元件：
1. 啟動Android Studio並開啟記事應用程式。
2. 在應用程式目錄（App）按滑鼠右鍵，選擇「New -> Google -> Google Map Activity」。
3. 使用預設的設定，選擇「Finish」：[](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-17_55d1b9f02f994.png)
4. Android Studio建立好需要的元件以後，會自動開啟「google*maps*api.xml」，找到畫面中一個很長的網址，全部選擇以後按複製所有的內容：[](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-17_55d1b9fd89a2d.png)
5. 啟動瀏覽器在網址列貼上前一個步驟複製的網址，使用Google的帳號登入以後，勾選同意服務條款，選擇「同意並繼續」：[](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-17_55d1ba05be886.png)
6. 網頁右下角顯示處理中的活動訊息：[](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-17_55d1ba0cc1e71.png)
7. 在出現的對話框選擇「建立」：[](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-17_55d1ba138d83c.png)
8. 建立完成後，在「API金鑰」後面的一串內容，就是為已經申請好的Google Maps API Key。選擇並複製API金鑰的內容：[](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-17_55d1ba1d07a30.png)
9. 回到Android Studio，在google*maps*api.xml檔案，找到「YOUR*KEY*HERE」的位置：[](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-17_55d1ba1f02bdd.png)
10. 把第八個步驟複製的API金鑰貼上與覆蓋「YOUR*KEY*HERE」：[](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-17_55d1ba2752c32.png)
完成上面的步驟以後，就已經建立好一個預設的地圖元件。依照下列的說明，檢查Android Studio為應用程式加入的內容：
* google*maps*api.xml：儲存與設定Google Maps API Key的資源檔案。
* MapsActivity.java：地圖元件。
* activity_maps.xml：地圖元件使用的畫面資源檔。
* Gradle Scripts -> build.gradle(Module:app)：在「dependencies」區塊加入Google Play Service SDK的設定。
~~~
dependencies {
...
compile 'com.google.android.gms:play-services:7.0.0'
}
~~~
* AndroidManifest.xml：在標籤下加入讀取位置的授權，目前還沒有使用讀取位置的功能。
~~~
<!-- 新增地圖元件的時候，自動加入的設定 -->
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
~~~
* AndroidManifest.xml：在標籤下加入Google Service版本、Google Map API key與地圖元件的設定。
~~~
<!-- Google Service版本 -->
<meta-data
android:name="com.google.android.gms.version"
android:value="@integer/google_play_services_version" />
<!-- Google Map API key -->
<meta-data
android:name="com.google.android.maps.v2.API_KEY"
android:value="@string/google_maps_key" />
<!-- 地圖元件 -->
<activity
android:name=".MapsActivity"
android:label="@string/title_activity_maps" >
~~~
## 13-2 啟動地圖元件
建立好的地圖元件，可以使用一般的方式啟動它。開啟「ItemActivity.java」，參考下列的內容，加入啟動地圖元件的程式碼：
~~~
public void clickFunction(View view) {
int id = view.getId();
switch (id) {
...
case R.id.set_location:
// 啟動地圖元件用的Intent物件
Intent intentMap = new Intent(this, MapsActivity.class);
// 啟動地圖元件
startActivityForResult(intentMap, START_LOCATION);
break;
...
}
}
~~~
完成上面的程式碼，連接實體裝置到電腦，執行應用程式後選擇安裝到實體裝置。在應用程式的主畫面選擇任何一個記事資料，選擇位置按鈕元件：
[](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-17_55d1ba3391de7.png)
應用程式啟動地圖元件以後，如果出現下列的畫面，表示地圖元件可以正確的運作：
[](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-17_55d1ba3552182.png)
## 13-3 管理與新增Google Maps API Key
每一個使用地圖元件的應用程式，都需要依照上列的方式建立Google Maps API Key，地圖才可以正確下載與顯示。如果開發其它使用地圖元件的應用程式，可以繼續使用同一個Google Maps API Key。參考下列的步驟，先瞭解執行設定的作法：
1. 在瀏覽器開啟這個網頁：[https://console.developers.google.com/](https://console.developers.google.com/)。
2. 選擇「My Project」:
[](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-17_55d1ba367bf07.png)
1. 選擇「API和憑證 -> 憑證」目錄後，找到剛才申請的Android 應用程式的金鑰，選擇「編輯允許使用的Android應用程式」：
[](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-17_55d1ba37ca187.png)
1. 參考網頁的說明，加入第二個應用程式。在同一台電腦開發的時候，在「;」前的設定不變，「;」後面是應用程式的套件名稱。完成後選擇「更新」就可以讓其它應用程式使用這個申請好的Google Maps API Key：
[](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-17_55d1ba3a4be85.png)
## 13-4 設定地圖顯示的位置
目前地圖元件顯示的畫面是預設的位置，以記事應用程式來說，在啟動地圖元件以後，需要將位置移動到儲存的位置，或是根據裝置資訊顯示目前的位置。目前的記事資料還沒有儲存位置資訊，下一章就會說明讀取與儲存位置資訊的作法，現在先瞭解設定地圖顯示位置的作法。
開啟「MapsActivity.java」，加入提供移動地圖功能的方法：
~~~
// 移動地圖到參數指定的位置
private void moveMap(LatLng place) {
// 建立地圖攝影機的位置物件
CameraPosition cameraPosition =
new CameraPosition.Builder()
.target(place)
.zoom(17)
.build();
// 使用動畫的效果移動地圖
mMap.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition));
}
~~~
同樣在「MapsActivity.java」，找到預設的「setUpMap」方法，參考下列的內容修改原有的程式碼：
~~~
private void setUpMap() {
// 刪除原來預設的內容
//mMap.addMarker(new MarkerOptions().position(new LatLng(0, 0)).title("Marker"));
// 建立位置的座標物件
LatLng place = new LatLng(25.033408, 121.564099);
// 移動地圖
moveMap(place);
}
~~~
完成上面的程式碼，執行應用程式後選擇安裝到實體裝置。在應用程式的主畫面選擇任何一個記事資料，選擇位置按鈕元件。應用程式啟動地圖元件以後，地圖畫面就會移動到指定的位置：
[](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-17_55d1ba56321d3.png)
## 13-5 新增地圖標記
地圖元件可以依照應用程式的需求，在地圖指定的位置加入標記。在「com.google.android.gms.maps.model」套件提供下列的元件：
* Marker – 在地圖上的一個標記就是一個Marker物件。
* MarkerOptions – 在加入Marker到地圖前，先使用它設定好Marker的所有資訊，例如位置、圖示與標題。
* BitmapDescriptor與BitmapDescriptorFactory – 需要設定Marker圖示的時候會用到它們。
開啟「MapsActivity.java」，加入設定地圖標記的方法：
~~~
// 在地圖加入指定位置與標題的標記
private void addMarker(LatLng place, String title, String snippet) {
BitmapDescriptor icon =
BitmapDescriptorFactory.fromResource(R.drawable.ic_launcher);
MarkerOptions markerOptions = new MarkerOptions();
markerOptions.position(place)
.title(title)
.snippet(snippet)
.icon(icon);
mMap.addMarker(markerOptions);
}
~~~
同樣在「MapsActivity.java」，找到「setUpMap」方法，參考下列的內容修改原有的程式碼：
~~~
private void setUpMap() {
// 刪除原來預設的內容
//mMap.addMarker(new MarkerOptions().position(new LatLng(0, 0)).title("Marker"));
// 建立位置的座標物件
LatLng place = new LatLng(25.033408, 121.564099);
// 移動地圖
moveMap(place);
// 加入地圖標記
addMarker(place, "Hello!", " Google Maps v2!");
}
~~~
完成上面的程式碼，執行應用程式後選擇安裝到實體裝置。在應用程式的主畫面選擇任何一個記事資料，選擇位置按鈕元件。應用程式啟動地圖元件以後，地圖畫面在指定的位置顯示標記：
[](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-17_55d1ba5ac9f96.png)
點選標記以後，標記上方就會顯示設定的說明：
[](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-08-17_55d1ba62ec9f0.png)
完成這一章關於地圖的應用，下一章加入位置資訊的讀取與儲存以後，就可以在地圖元件顯示記事儲存的位置，或是根據裝置資訊顯示目前的位置。