地圖已經(jīng)是非常普遍的使用在各種應(yīng)用程式，Google在2013年2月，為Android平臺(tái)推出Google Maps Android API v2，使用全新的設(shè)計(jì)方式，改良地圖元件的畫面與效率，增加3D建築物，還有簡(jiǎn)化的繪圖API。Android已經(jīng)在2013年4月停止舊的API，所以這裡只會(huì)說明Google Maps Android API v2的設(shè)計(jì)方式。
Google Maps Android API v2包含在「Google Play Service SDK」，目前不能在模擬裝置中測(cè)試地圖應(yīng)用程式，所以必需準(zhǔn)備好實(shí)體裝置，接下來的應(yīng)用程式必須安裝在實(shí)體裝置執(zhí)行測(cè)試。
這一章為記事資料加入地圖元件的應(yīng)用，如果使用者在記事資料儲(chǔ)存座標(biāo)的資料，就可以啟動(dòng)地圖元件顯示儲(chǔ)存的地點(diǎn)：
[](https://box.kancloud.cn/2015-08-17_55d1b9e0f329b.png)
[](https://box.kancloud.cn/2015-08-17_55d1b9e296382.png)
## 13-1 建立地圖元件
地圖元件從網(wǎng)路下載所有的資料，包含地圖、接道名稱、衛(wèi)星空照與地形。應(yīng)用程式必須申請(qǐng)專用的「Google Maps API Key」，才可以正確的下載資料。使用Android Studio可以簡(jiǎn)化地圖應(yīng)用程式的開發(fā)，在開始設(shè)計(jì)地圖應(yīng)用程式之前，先依照下列的的步驟，確認(rèn)已經(jīng)安裝好「Google Play services」SDK：
1. 啟動(dòng)Android Studio並開啟記事應(yīng)用程式。
2. 選擇功能表「Tools -> Android -> SDK Manager」。
3. 在Android SDK Manager視窗，檢查「Extras -> Google Play services」是否已經(jīng)安裝。如果還沒有安裝的話，勾選並執(zhí)行安裝的工作：[](https://box.kancloud.cn/2015-08-17_55d1b9eaf02ab.png)
依照下列的的步驟，為記事應(yīng)用程式新增一的地圖元件：
1. 啟動(dòng)Android Studio並開啟記事應(yīng)用程式。
2. 在應(yīng)用程式目錄（App）按滑鼠右鍵，選擇「New -> Google -> Google Map Activity」。
3. 使用預(yù)設(shè)的設(shè)定，選擇「Finish」：[](https://box.kancloud.cn/2015-08-17_55d1b9f02f994.png)
4. Android Studio建立好需要的元件以後，會(huì)自動(dòng)開啟「google*maps*api.xml」，找到畫面中一個(gè)很長(zhǎng)的網(wǎng)址，全部選擇以後按複製所有的內(nèi)容：[](https://box.kancloud.cn/2015-08-17_55d1b9fd89a2d.png)
5. 啟動(dòng)瀏覽器在網(wǎng)址列貼上前一個(gè)步驟複製的網(wǎng)址，使用Google的帳號(hào)登入以後，勾選同意服務(wù)條款，選擇「同意並繼續(xù)」：[](https://box.kancloud.cn/2015-08-17_55d1ba05be886.png)
6. 網(wǎng)頁(yè)右下角顯示處理中的活動(dòng)訊息：[](https://box.kancloud.cn/2015-08-17_55d1ba0cc1e71.png)
7. 在出現(xiàn)的對(duì)話框選擇「建立」：[](https://box.kancloud.cn/2015-08-17_55d1ba138d83c.png)
8. 建立完成後，在「API金鑰」後面的一串內(nèi)容，就是為已經(jīng)申請(qǐng)好的Google Maps API Key。選擇並複製API金鑰的內(nèi)容：[](https://box.kancloud.cn/2015-08-17_55d1ba1d07a30.png)
9. 回到Android Studio，在google*maps*api.xml檔案，找到「YOUR*KEY*HERE」的位置：[](https://box.kancloud.cn/2015-08-17_55d1ba1f02bdd.png)
10. 把第八個(gè)步驟複製的API金鑰貼上與覆蓋「YOUR*KEY*HERE」：[](https://box.kancloud.cn/2015-08-17_55d1ba2752c32.png)
完成上面的步驟以後，就已經(jīng)建立好一個(gè)預(yù)設(shè)的地圖元件。依照下列的說明，檢查Android Studio為應(yīng)用程式加入的內(nèi)容：
* google*maps*api.xml：儲(chǔ)存與設(shè)定Google Maps API Key的資源檔案。
* MapsActivity.java：地圖元件。
* activity_maps.xml：地圖元件使用的畫面資源檔。
* Gradle Scripts -> build.gradle(Module:app)：在「dependencies」區(qū)塊加入Google Play Service SDK的設(shè)定。
~~~
dependencies {
...
compile 'com.google.android.gms:play-services:7.0.0'
}
~~~
* AndroidManifest.xml：在標(biāo)籤下加入讀取位置的授權(quán)，目前還沒有使用讀取位置的功能。
~~~
<!-- 新增地圖元件的時(shí)候，自動(dòng)加入的設(shè)定 -->
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
~~~
* AndroidManifest.xml：在標(biāo)籤下加入Google Service版本、Google Map API key與地圖元件的設(shè)定。
~~~
<!-- 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 啟動(dòng)地圖元件
建立好的地圖元件，可以使用一般的方式啟動(dòng)它。開啟「ItemActivity.java」，參考下列的內(nèi)容，加入啟動(dòng)地圖元件的程式碼：
~~~
public void clickFunction(View view) {
int id = view.getId();
switch (id) {
...
case R.id.set_location:
// 啟動(dòng)地圖元件用的Intent物件
Intent intentMap = new Intent(this, MapsActivity.class);
// 啟動(dòng)地圖元件
startActivityForResult(intentMap, START_LOCATION);
break;
...
}
}
~~~
完成上面的程式碼，連接實(shí)體裝置到電腦，執(zhí)行應(yīng)用程式後選擇安裝到實(shí)體裝置。在應(yīng)用程式的主畫面選擇任何一個(gè)記事資料，選擇位置按鈕元件：
[](https://box.kancloud.cn/2015-08-17_55d1ba3391de7.png)
應(yīng)用程式啟動(dòng)地圖元件以後，如果出現(xiàn)下列的畫面，表示地圖元件可以正確的運(yùn)作：
[](https://box.kancloud.cn/2015-08-17_55d1ba3552182.png)
## 13-3 管理與新增Google Maps API Key
每一個(gè)使用地圖元件的應(yīng)用程式，都需要依照上列的方式建立Google Maps API Key，地圖才可以正確下載與顯示。如果開發(fā)其它使用地圖元件的應(yīng)用程式，可以繼續(xù)使用同一個(gè)Google Maps API Key。參考下列的步驟，先瞭解執(zhí)行設(shè)定的作法：
1. 在瀏覽器開啟這個(gè)網(wǎng)頁(yè)：[https://console.developers.google.com/](https://console.developers.google.com/)。
2. 選擇「My Project」:
[](https://box.kancloud.cn/2015-08-17_55d1ba367bf07.png)
1. 選擇「API和憑證 -> 憑證」目錄後，找到剛才申請(qǐng)的Android 應(yīng)用程式的金鑰，選擇「編輯允許使用的Android應(yīng)用程式」：
[](https://box.kancloud.cn/2015-08-17_55d1ba37ca187.png)
1. 參考網(wǎng)頁(yè)的說明，加入第二個(gè)應(yīng)用程式。在同一臺(tái)電腦開發(fā)的時(shí)候，在「;」前的設(shè)定不變，「;」後面是應(yīng)用程式的套件名稱。完成後選擇「更新」就可以讓其它應(yīng)用程式使用這個(gè)申請(qǐng)好的Google Maps API Key：
[](https://box.kancloud.cn/2015-08-17_55d1ba3a4be85.png)
## 13-4 設(shè)定地圖顯示的位置
目前地圖元件顯示的畫面是預(yù)設(shè)的位置，以記事應(yīng)用程式來說，在啟動(dòng)地圖元件以後，需要將位置移動(dòng)到儲(chǔ)存的位置，或是根據(jù)裝置資訊顯示目前的位置。目前的記事資料還沒有儲(chǔ)存位置資訊，下一章就會(huì)說明讀取與儲(chǔ)存位置資訊的作法，現(xiàn)在先瞭解設(shè)定地圖顯示位置的作法。
開啟「MapsActivity.java」，加入提供移動(dòng)地圖功能的方法：
~~~
// 移動(dòng)地圖到參數(shù)指定的位置
private void moveMap(LatLng place) {
// 建立地圖攝影機(jī)的位置物件
CameraPosition cameraPosition =
new CameraPosition.Builder()
.target(place)
.zoom(17)
.build();
// 使用動(dòng)畫的效果移動(dòng)地圖
mMap.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition));
}
~~~
同樣在「MapsActivity.java」，找到預(yù)設(shè)的「setUpMap」方法，參考下列的內(nèi)容修改原有的程式碼：
~~~
private void setUpMap() {
// 刪除原來預(yù)設(shè)的內(nèi)容
//mMap.addMarker(new MarkerOptions().position(new LatLng(0, 0)).title("Marker"));
// 建立位置的座標(biāo)物件
LatLng place = new LatLng(25.033408, 121.564099);
// 移動(dòng)地圖
moveMap(place);
}
~~~
完成上面的程式碼，執(zhí)行應(yīng)用程式後選擇安裝到實(shí)體裝置。在應(yīng)用程式的主畫面選擇任何一個(gè)記事資料，選擇位置按鈕元件。應(yīng)用程式啟動(dòng)地圖元件以後，地圖畫面就會(huì)移動(dòng)到指定的位置：
[](https://box.kancloud.cn/2015-08-17_55d1ba56321d3.png)
## 13-5 新增地圖標(biāo)記
地圖元件可以依照應(yīng)用程式的需求，在地圖指定的位置加入標(biāo)記。在「com.google.android.gms.maps.model」套件提供下列的元件：
* Marker – 在地圖上的一個(gè)標(biāo)記就是一個(gè)Marker物件。
* MarkerOptions – 在加入Marker到地圖前，先使用它設(shè)定好Marker的所有資訊，例如位置、圖示與標(biāo)題。
* BitmapDescriptor與BitmapDescriptorFactory – 需要設(shè)定Marker圖示的時(shí)候會(huì)用到它們。
開啟「MapsActivity.java」，加入設(shè)定地圖標(biāo)記的方法：
~~~
// 在地圖加入指定位置與標(biāo)題的標(biāo)記
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」方法，參考下列的內(nèi)容修改原有的程式碼：
~~~
private void setUpMap() {
// 刪除原來預(yù)設(shè)的內(nèi)容
//mMap.addMarker(new MarkerOptions().position(new LatLng(0, 0)).title("Marker"));
// 建立位置的座標(biāo)物件
LatLng place = new LatLng(25.033408, 121.564099);
// 移動(dòng)地圖
moveMap(place);
// 加入地圖標(biāo)記
addMarker(place, "Hello!", " Google Maps v2!");
}
~~~
完成上面的程式碼，執(zhí)行應(yīng)用程式後選擇安裝到實(shí)體裝置。在應(yīng)用程式的主畫面選擇任何一個(gè)記事資料，選擇位置按鈕元件。應(yīng)用程式啟動(dòng)地圖元件以後，地圖畫面在指定的位置顯示標(biāo)記：
[](https://box.kancloud.cn/2015-08-17_55d1ba5ac9f96.png)
點(diǎn)選標(biāo)記以後，標(biāo)記上方就會(huì)顯示設(shè)定的說明：
[](https://box.kancloud.cn/2015-08-17_55d1ba62ec9f0.png)
完成這一章關(guān)於地圖的應(yīng)用，下一章加入位置資訊的讀取與儲(chǔ)存以後，就可以在地圖元件顯示記事儲(chǔ)存的位置，或是根據(jù)裝置資訊顯示目前的位置。
- 第一堂
- 第一堂（1）西游記里的那只猴子
- 第一堂（2）準(zhǔn)備 Android Studio 開發(fā)環(huán)境
- 第一堂（3）開始設(shè)計(jì) Android 應(yīng)用程式
- 第一堂（4）開發(fā) Android 應(yīng)用程式的準(zhǔn)備工作
- 第二堂
- 第二堂（1）規(guī)劃與建立應(yīng)用程式需要的資源
- 第二堂（2）設(shè)計(jì)應(yīng)用程式使用者界面
- 第二堂（3）應(yīng)用程式與使用者的互動(dòng)
- 第二堂（4）建立與使用 Activity 元件
- 第三堂
- 第三堂（1）為L(zhǎng)istView元件建立自定畫面
- 第三堂（2）儲(chǔ)存與讀取應(yīng)用程式資訊
- 第三堂（3）Android 內(nèi)建的 SQLite 數(shù)據(jù)庫(kù)
- 第四堂
- 第四堂（1）使用照相機(jī)與麥克風(fēng)
- 第四堂（2）設(shè)計(jì)地圖應(yīng)用程式 - Google Maps Android API v2
- 第四堂（3）讀取裝置目前的位置 - Google Services Location
- 第五堂
- 第五堂（1）建立廣播接收元件 - BroadcastReceiver
- 第五堂（2）系統(tǒng)通知服務(wù) - Notification
- 第五堂（3）設(shè)計(jì)小工具元件 - AppWidget
- 第六堂
- 第六堂（1）Material Design - Theme與Transition
- 第六堂（2）Material Design - RecylerView
- 第六堂（3）Material Design - Shared Element與自定動(dòng)畫效果