實驗十四：顯示與控制地圖

實驗十四 主題 目的 環境需求 本實驗為練習使用Google Map地圖 取得Google Map地圖不同模式的顯示方式和控制縮放大小 Java SE Development Kit (JDK) Android SDK Google play services SDK Eclipse ADT 實體裝置 本實驗為練習使用Google Map地圖不同模式的顯示方式和控制縮放大小。

實驗十四範例

金鑰與環境建立 Step1.開通Google Maps Android服務與獲取金鑰，下載Google Play Services套件 Step2.將google-play-services_lib專案匯入至工作區中 Step3.建立專案，並將google-play-services_lib加入參考

加入權限 Step4.在專案的AndroidManifest.xml檔案中加入地圖相關使用權限等 上述程式碼中，需自行將金鑰更換為從Android API網站管理頁面中取得的應用程式金鑰 <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-feature android:glEsVersion="0x00020000" android:required="true" /> 在<manifest>節點內插入以下程式碼 在<application>節點內插入以下程式碼 <meta-data android:name="com.google.android.maps.v2.API_KEY" android:value="金鑰" /> <meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version" />

畫面佈局 Step5.將佈局檔預設相對佈局改為垂直線性佈局，並放入元件於佈局中 將佈局檔res/layout/activity_main.xml打開，先將TextView元件刪除，將根節點佈局改為垂直線性佈局LinearLayout(Vertical)，將1個LinearLayout(Horizontal)和一個Fragment拖曳到概要視窗的LinearLayout中，拖曳Fragment時會跳出下圖視窗，請選取MapFragment。(跳出視窗中若無MapFragment，選擇取消，請使用XML編輯方式將元件進行編輯)

畫面佈局 再將1個Spinner和1個CheckBox拖曳到LinearLayout(Horizontal)佈局中，修改CheckBox與fragment相關屬性，佈局完整檔案內容如下 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/LinearLayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" > <Spinner android:id="@+id/spinner1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" /> <CheckBox android:id="@+id/checkBox1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="交通狀況" /> </LinearLayout> <fragment xmlns:map="http://schemas.android.com/apk/res-auto" android:name="com.google.android.gms.maps.MapFragment" android:id="@+id/fragment1" android:layout_width="match_parent" android:layout_height="match_parent" map:cameraBearing="0" map:cameraTargetLat="24.968669" map:cameraTargetLng="121.193855" map:cameraTilt="90" map:cameraZoom="14" map:mapType="normal" map:uiCompass="true" map:uiRotateGestures="true" map:uiScrollGestures="true" map:uiTiltGestures="true" map:uiZoomControls="false" map:uiZoomGestures="true" /> Note:若在XML編輯地圖相關屬性出現錯誤時，請點選Eclipse選單 專案清除

src/MainActivity.java Step6. 打開Java程式，找出XML佈局中的元件並註冊事件 宣告一個GoogleMap物件googleMap變數、一個Spinner物件spnMapType變數、一個CheckBox物件chkTraffic變數和一個儲存的圖型態的字串陣列mapType 在onCreate()方法中的setContentView(R.layout.activity_main);下方，先利用GooglePlayServicesUtil.isGooglePlayServicesAvailable(this);方法判斷Google Play Services在裝置中是否可使用，若不可使用，跳出對話視窗顯示錯誤原因 若可使用，利用findViewById()依據元件代號找 出XML佈局檔中的Spinner和CheckBox物件， 設定Spinner的選項，註冊Spinner的 onItemSelected和CheckBox的 onCheckedChanged事件

src/MainActivity.java Step7.找出片段中的GoogleMap物件 利用FragmentManager類別中的getFragmentManager()方法取得FragmentManager物件，再利用其findFragmentById()方法找出MapFragment物件，最後利用MapFragment的getMap()方法取出GoogleMap物件 Step8.實作onCheckedChanged()方法內容 當使用者點選CheckBox時，此時程式會跳去執行onCheckedChanged()方法，從arg1參數可知此CheckBox是否有被勾選，依據勾選狀況，利用GoogleMap類別的setTrafficEnabled()方法設定是否顯示交通狀況 Step9.實作onItemSelected()方法內容 當使用者選擇Spinner某個選項時，此時程式會跳去執行onItemSelected()方法，依據選取選項，利用GoogleMap類別的setMapType()方法設定顯示地圖模示 Step10.實作onCancel()方法內容 若Google Play Services在裝置中不可使用，會跳出對話視窗，對話視窗消失時，會執行onCancel()方法，呼叫Activity類別中的finish()方法，關閉視窗應用程式

src/MainActivity.java public class MainActivity extends Activity implements OnItemSelectedListener, OnCheckedChangeListener , OnCancelListener { GoogleMap googleMap; Spinner spnMapType; CheckBox chkTraffic; String[] mapType = { "街道圖", "衛星圖", "衛星圖+街道圖", "地形圖" }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); int errorCode=GooglePlayServicesUtil.isGooglePlayServicesAvailable(this); if(errorCode!=ConnectionResult.SUCCESS) GooglePlayServicesUtil.showErrorDialogFragment(errorCode,this,111,this); else { spnMapType = (Spinner) findViewById(R.id.spinner1); chkTraffic = (CheckBox) findViewById(R.id.checkBox1); ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_spinner_dropdown_item, mapType); spnMapType.setAdapter(adapter); spnMapType.setOnItemSelectedListener(this); chkTraffic.setOnCheckedChangeListener(this); MapFragment frag=(MapFragment) getFragmentManager().findFragmentById(R.id.fragment1); googleMap=frag.getMap(); }

public void onCheckedChanged(CompoundButton arg0, boolean arg1) { if (arg1) googleMap.setTrafficEnabled(true);/* 顯示交通狀況 */ else googleMap.setTrafficEnabled(false);/* 不顯示交通狀況 */ } public void onItemSelected(AdapterView<?> arg0,View arg1,int arg2,long arg3){ switch (arg2) { case 0:/* 一般街道模式 */ googleMap.setMapType(GoogleMap.MAP_TYPE_NORMAL); break; case 1:/* 衛星模式 */ googleMap.setMapType(GoogleMap.MAP_TYPE_SATELLITE); case 2:/* 街道衛星混和模式 */ googleMap.setMapType(GoogleMap.MAP_TYPE_HYBRID); case 3:/* 地形模式 */ googleMap.setMapType(GoogleMap.MAP_TYPE_TERRAIN); @Override public void onNothingSelected(AdapterView<?> arg0) { } public void onCancel(DialogInterface arg0) { finish(); /* 將視窗關閉*/

測試 可在Android 4.2(含)以上版本的Google API模擬器上測試 在實體手機上進行測試 將程式佈建到實體手機前，須先安裝手機USB驅動程式在電腦中 在有些Android 4.2.x裝置中"開發人員選項"功能是被隱藏起來，需進行打開，請點選“設定”“關於手機”，點選“版本號碼”7次，由於每支手機不同，若無此選項或無法打開開發功能選項，請試著點選其他選項，成功時會有視窗跳出提示訊息，啟動後，在設定中就會有“開發人員選項”功能 點選“開發人員選項”，將 “USB偵錯”勾選，執行時，請點選專案，按右鍵，點選“執行為”“執行配置”Target，點選Always prompt to pick device，點選“執行”，會跳出裝置挑選視窗，點選要佈建的裝置，即可將應用程式佈建到裝置上 Note: Google Map 在Android 4.2(含)以上可以在模擬器中執行，但必須在建立模擬器(AVD)時選擇Google APIs level 17(含)以上 Note:若在實體手機上出現更新Google Play services APIs的按鈕，直接點選以進行更新；若是在模擬器上出現更新按鈕，則必須透過Android SDK Manager將對應模擬器Android版本的Google APIs更新 Note:若執行時出現 類似以下訊息 06-03 15:23:09.397: E/AndroidRuntime(6943): FATAL EXCEPTION: main 06-03 15:23:09.397: E/AndroidRuntime(6943): java.lang.RuntimeException: Unable to start activity ComponentInfo{tw.edu.ncu.ce.bnlab.googlemapex/tw.edu.ncu.ce.bnlab.googlemapex.MainActivity}: android.view.InflateException: Binary XML file line #13: Error inflating class fragment 表示在專案的AndroidManifest.xml檔案中，<application>標籤內漏加了 <meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version" /> http://developer.android.com/tools/device.html