Lab _B: GPS 與 Google 地圖簡易開發 張志宏 修平科技大學資訊管理系 Email: chchang@hust.edu.tw 陳文敬 修平科技大學資訊網路技術系 Email: jameschen@hust.edu.tw 實驗器材 PC Requirement: PC with Eclipse + Android SDK and ADT for Eclipse. Windows 7/XP and Linux(Ubuntu 8.04) 行動裝置 Android 手機或平板, 建議 2.3.3 以上版本. 實驗所需軟體 Java SDK 7.x Eclipse 4.3 for Java 或 Java EE (Kepler) Android SDK R22 above Android ADT (plugin for Eclipse) 實驗所需軟體, 除了 Windows OS 之外, 均為 Open Sources, 請自行從網路上下載 取得
簡介 : 智慧型手機 / 平板與傳統電腦或筆電的差異在於移動性與感測能力 本實驗的目的是讓同學們實際理解手持設備的定位開發技術以及如何利用 Google 地圖將所偵測到的 GPS 位置標示在地圖上 Google 所提供的地圖功能分為三種版本, 其中 for Android v1.0 版本已經在 2013 年宣告停止申請, 目前可以利用 for Android V2.0 進行地圖相關的 App 開發, 或者結合 WebView 元件, 以類網頁的方式來使用 v3 的地圖 Google 近幾年開始整合旗下所提供的相關網路服務, 在 Android App 開發環境內, 所有專案必須引用 Google Play Service 框架 包含 Google Maps for Android V2 也是如此 此外, 新版定位服務也有類似的作法 請同學們務必先理解此一現象 此實驗內容主要是存取 Google Maps for Android V2 為主 過程中需要先建立個人數位簽章檔 ( KeyStore), 再取得該數位簽章的 SHA1, 然後到 Google 雲端服務平台申請 APIs Key (for Android) 以利程式使用 註 :App 上架也需要利用相同 KeyStore 進行 APK 簽章加密, 之後方可上架 本手冊包含以下主要實驗內容 : (A) 利用 JDK 內附的 Keytool 製作簽章檔案, 並取出 SHA1 備用 ; (B) 登入 Google 雲端服務平台, 利用 SHA1 申請 APIs Key; (C) 準備 Eclipse 開發環境 : 安裝並匯入 Google Play Services; (D) 開發基本 Google Maps App: 修改 AndroidManifest.xml; (E) 利用指令讀取 GPS 定位資訊, 並將位置標示在地圖相對位置 ; (F) 匯出 APK 檔 驗證成果
實驗步驟 Step1. 創建個人數位簽章檔案 ( Keystore ) 並取得 SHA1: 甲 開啟文字視窗 (cmd.exe), 並利用以下指令創建個人數位簽章 (1) 先切換到 JDK 的安裝路徑內的 bin C:\Program Files\Java \> CD C:\Program Files\Java\jdk\ jdk1.7.x_xx\bin (2) 利用工具 keytools 建立新簽章 C:\Program Files\Java \>keytool -genkey -alias jamesapp -keypass 111222 -validity 36500 -keystore D:\jameschen.keystore -storepass 123456 註 : 執行過程中需要輸入資料, 請參考以下畫面 : 乙 接著, 再利用 keytool 由簽章檔案取出 SHA1 數位簽章 C:\Program Files\Java \> keytool -list -v -keystore D:\jameschen.keystore 請將 SHA1: 後方的文字 (68:06 97:17) 複製出來備用
Step 2. 利用 SHA1 申請 APIs Key: 首先, 需登入 Google 開發者網頁 https://developers.google.com/ 點選 [API Console] 圖示, 注意 : 若是第一次使用, 需要先建立專案, 如實驗 A - GAE 的部分. 或者你會看到類似以下的畫面, 請點擊 [Create project ] 註 :Google 版本變化快, 雖畫面可能不同, 但功能大同小異 2.1 點選右邊的 [API 與驗證 ] 展開, 檢查當前已經開啟的 [API]. 建議開啟 : (1) Google Map Android v2 (2) Google Map JavaScript v3 選擇後的畫面如下圖所示 ( 其他選項請忽略 ):
註 : 進入主控台可能需要先登入 Google 帳號 2.2 取得授權憑證鑰匙 (key) : 點選 [ 憑證 ] [ 建立新的金立新的金鑰 ] 根據你要使用的 Google Maps 種類選擇 : Google Maps v2 for Android : Android 金鑰 Google Maps v3 : 瀏覽器金鑰 (HTML) (1) Android 金鑰 : 貼上先前取得的 SHA1, 加上分號 (;), 再加上套件名稱. 你可以輸入一個以上的 SHA1 + ; + 套件名稱. 記得兩筆資料之間要換行 註 1: 套件名稱就是開發 Android App 的 package name. 兩者必須相同, 否則會有地圖顯示不出來的問題 註 2: 建議同時將 Android SDK 內建的開發金鑰一起加入 : 開啟 Eclipse [Window] [Preferences] [Android] [Build] 找到 SHA1
輸入後, 點擊 [ 建立 ], 就會看到類似以下的畫面 取複製 API 金鑰右方的 那串文數字備用 (2) 瀏覽器金鑰 : 主要是給瀏覽器 (HTML) 使用的 因為一般的瀏覽器操作是在使用者端, 其網址或網域均不固定, 因此此處一 般不填寫 ; 除非在特殊應用場所 請點擊 [ 建立 ], 就會看到類似以下的畫 面 複製 API 金鑰右方的那串文數字備用
Step 3. 安裝開發環境 Google Play Services 3.1 開啟 Eclipse 選單 [Window] [Android SDK Manager] [Extras] 安裝 Google play services ; 註 : 版本可能會有所不同 3.2 檢查 : 安裝完成後, 可以開啟 Android SDK 安裝目錄, 檢查方才所安裝的 Google Play Services 相關套件 :(<Android-sdk-windows>\extras\google) 可以看到此目錄
Step 4. 前置作業設定 匯入 Google Play Service Library 事實上 Google Play Services 是以程式庫的形式發行, 主要是讓開發者可以容易地使用 Google 所提供的相關服務 (APIs) 因此, 我們必須在當前的工作區 (Workspace) 內匯入方才的 Google Play Service, 這樣其他專案方可引用到該套件內的功能 4.1 選單 [File] [Import] [Android] [Existing Android Code Into Workspace], 接著會出現以下畫面 ( 尚未輸入資料 ): 4.2 在上述設定畫面中, 點擊 Root Directory 最右邊的 [Browse ] 按鈕, 選擇步驟 三所找到的 Google Play Serivces 路徑內的 libproject; 選定後即會出上述畫面 最 後點擊 [Finish] 完成匯入動作 4.3 檢查專案瀏覽區是否有該專案存在, 並保持開啟狀態 : 註 : 此程式庫程式庫需保持開啟狀態, 否則, 其他專案可能會有錯誤訊息發生
Step 5. 開發簡易 Google Maps App 5.1 新增 Android App 專案 : [File] [New] [Android Application Project] 1 2 3 (1) 在輸入畫面中, 務必注意 Package Name: 必須與申請 API 的套件名稱相同 (2) Minimum Required SDK: 請至少選擇 3.0 以上版本. (3) Compile With: 請更改為 Google APIs 的版本 ; 不一定需要選擇最新版. (4) 其他專案參數則採預設值即可. 5.2 引用 Google Play Services 程式庫 : 以滑鼠右鍵點選 MapV2Demo 專案, 選擇專案屬性 [Properties] 選擇 [Android], 會看到類似以下的畫面 此時, 我們需要點選畫面下方的 Library 內的 [Add ], 接著選擇剛才加入工作區的 Google Play Services 程式庫.
選擇方才匯入的程式庫, 再點擊 [OK]
前一個畫面中的程式庫窗格內就會出現以下畫面 : 接著, 請依序點擊 [Apply] [OK] 完成設定動作 註 : 未來若有因為版本或路徑變更而造成匯入程式庫引用失敗的狀況, 可以開啟 此一設定畫面, 先移除舊版後再重新引用新版本即可 5.3 開啟清單檔案 AndroidManifest.xml, 加入必要權限權限設定 : 範例中的 MyPackage 必須改為你的專案套件名稱 ( 例 :tw.idv.jameschen.mapv2demo) <permission android:name="mypackage.permission.maps_receive" android:protectionlevel="signature"/> <uses-permission android:name="mypackage.permission.maps_receive"/> <uses-permission android:name="android.permission.internet"/> <uses-permission android:name="android.permission.access_coarse_location"/> <uses-permission android:name="android.permission.access_fine_location"/> <uses-permission android:name="android.permission.write_external_storage"/> <uses-permission android:name="android.permission.access_network_state" /> <uses-permission android:name="com.google.android.providers.gsf.permission.read_gservices"/> 注意 : 權限設定是加在 <Application > 標籤的外面 建議直接插入到 <Application > 標籤的前面 5.4 接續上述動作, 在 <Application > 內部增加以下的 meta-data 設定值 : 而 範例中的 API_KEY 必須改為先前步驟所申請到的 key.
5.5 加入 OpenGL 的特徵參數 : 在 <Application > 外部加入以下標籤設定 : <uses-feature android:glesversion="0x00020000" android:required="true" /> 5.6 加入引用 Google Maps 的框架 : 手動編修 res/layout/activity_main.xml 2. 先刪除預設的文字標 籤 並加入 fragment 元件 1. 點選 XML 原始碼方 式來編修內容 <fragment android:id="@+id/map" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_x="0dp" android:layout_y="0dp" class="com.google.android.gms.maps.mapfragment" /> 此元件主要是承載並顯示 Google Maps 的畫面
5.7 驗證 Google Maps 是否正常顯示 : 請以滑鼠右鍵點選 MapV2Demo 專案, 選 擇 [Run As] [Android Application]. 正常狀況下, 系統會主動啟動適合的模擬 器, 接著就會看到類似以下的畫面 Step 6. 利用指令控制 GoogleMap 物件, 並在地圖特定位置標示出小圖示圖接著, 我們要利用指令來操控地圖的顯示, 主要是完成 : (1) 定中心點與縮放比率 ;(2) 顯示小圖示 開啟主要程式檔案 : src/< 套件名稱 >/MainActivity.java, 6.1 加入以下指令 : (1) 宣告必要變數 (20~27 行 ): 主要圖示標題 經緯度以及縮放比率 以及三個新的 Google Maps 類別, 分別是 :GoogleMap, LatLng 以及 Marker.
(2) 初始化 GoogleMap 模組 (33 行 ) (3) 確認畫面中的 fragment 元件正常運作 (35 行 ) (4) 移動地圖中心點與縮放比率 (38~39 行 ) 標示圖式 (41~46 行 ) 6.2 在新增上述指令的過程中,Eclipse 可能會出現 [ 部分元件元件未匯入 ] 的錯誤, 請直接點選錯誤行前方的提示燈泡圖示 [ ], 選擇 [Import ] 即可. 若 無法選擇 import, 請務必認真檢查英文字的拼寫是否有誤? // 即 GoogleMap 沒有匯入! 6.3 請再重覆執行步驟 5.7 [Run As] [Android Application] 看看效果
Step 7. 利用指令讀取 GPS 定位資訊, 並將位置標示在地圖相對位置接著, 我們要結合 GPS 接收模組, 主要是完成 : (1) 讀取定位資訊 ( 所在位置的經緯度 );(2) 標示小圖示 7.1 請加入以下指令 : (1) 取得定位管理員 (LocationManager, 52 行 ) (2) 註冊定位資訊更新事件, 並實作關鍵方法 (53~80 行 ): 先清除地圖中的圖示 繪圖元件 ; 然後在定位位置上標示新圖示 7.2 在新增上述指令的過程中,Eclipse 可能會出現 [ 部分元件元件未匯入 ] 的錯誤, 請直接點選錯誤行前方的提示燈泡圖示 [], 選擇 [Import ] 即可. 此處要特別注意的是 : 新版 Google Play Service 中定義新的 LocationListener, 本例必須選擇 android.location.locationlistener. 7.3 以模擬器驗證 GPS: 打開 DDMS [ 選擇 模擬器 ] [Emulator Control], 輸入不同 的經緯度, 看看圖示是否會移動
Step 8. 匯出專案的簽章 APK 檔案 以利以利安裝到手機 ( 分享 ) 驗證成果 : 8-1 以滑鼠右鍵點選 MapV2Demo 專案, 選擇 [Android Tools] [Export Signed Application Package ] 8.2 輸入必要參數 : 選擇專案 (MapV2Demo)
選擇先前創建的數位簽章檔案, 並輸入先前的檔案密碼 (123456) 接著輸入 Alias Key 的存取密碼 (111222) 最後輸入簽章後的 apk 儲存路徑 ( 含檔名 ) 8.3 將生成的 APK 安裝到實體機器驗證
故障排除 : 1. 執行 5.7 測試步驟時無法看到 Google Maps 顯示出來? A: 應該是 API 為設定內建的開發金鑰, 請確認步驟 2.2 是否有加入該金鑰 ; 此外, 檢查 XML 布局檔案內的 API_KEY 是否符合 專案的套件名稱是否有輸入錯誤? 2. 執行定位實驗時無法看到圖示移動? A: 請確認實體機器的 GPS 已經開啟 或模擬器的經緯輸入正確 ( 顛倒?) 練習時間 : 1. 在地圖上標示多個圖示. 2. 利用 GPS 追蹤並記錄使用者所在位置, 當使用者接近某個特定位 置時就主動發出警告訊息