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

Presentation on theme: "實驗十四：顯示與控制地圖."— Presentation transcript:

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

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

3 實驗十四範例

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

5 加入權限 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="0x " 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" />

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

7 畫面佈局 再將1個Spinner和1個CheckBox拖曳到LinearLayout(Horizontal)佈局中，修改CheckBox與fragment相關屬性，佈局完整檔案內容如下 <LinearLayout xmlns:android=" xmlns:tools=" 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:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" /> <CheckBox android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="交通狀況" /> </LinearLayout> <fragment xmlns:map=" android:name="com.google.android.gms.maps.MapFragment" android:layout_width="match_parent" android:layout_height="match_parent" map:cameraBearing="0" map:cameraTargetLat=" " map:cameraTargetLng=" " 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選單 專案清除

8 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事件

9 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()方法，關閉視窗應用程式

10 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(); }

11 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(); /* 將視窗關閉*/

12 測試 可在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:若執行時出現 類似以下訊息 :23:09.397: E/AndroidRuntime(6943): FATAL EXCEPTION: main :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" />