縹緲's blog

話說 XE8 的 What' New 內提到

New in XE8! MapView component for mobile platforms (iOS and Android) supporting platform specific interactive mapping libraries (respectively, by Apple and Google)

意思是 XE8 在 mobile 的環境提供一個新的 Map 元件，除了可以支援互動，還分別對應原生平台使用之 Map(Google Map 或 Apple Map)

感覺好像粉強大，趕快來試看看吧～

以 Delphi 提供的 Sample Demo - Map Type Selector 作為測試標的

在 iOS 平台....編譯就對了，沒啥特別的

在 android 平台...比較囉唆(google 規定的)，需要先一一設定好之後，編譯出來的 apk 才能順利執行，否則任何一個參數沒有好，很有可能 app 會 crash 開不起來

EMBT 官方有提供類似 step by step 的設定說明，網址如下

http://docwiki.embarcadero.com/CodeExamples/XE8/en/FMX.Mobile.Map_Sample

http://docwiki.embarcadero.com/RADStudio/XE8/en/Configuring_Android_Applications_to_Use_Google_Maps

(1)首先你要有 Google 的帳號，這部分應該不困難，如果之前你用過 GCM 的話，相信相關的申請或設定都已經經歷過了

(2)要取得 debug certificate fingertip，這部分是稍後申請 Google API Access 時需要的資訊，那該如何取得呢？

(2.a)先找到編譯 android 用的 keystore file，如果你沒有自行產生的話，那麼 delphi 安裝時會幫你產生的一個預設的，位置在

%Users%\<user name>\AppData\Roaming\Embarcadero\BDS\<version number>\

以 XE8 為例的話會在如下目錄，檔案名稱為 debug.keystore
C:\Users\JohnDoe\AppData\Roaming\Embarcadero\BDS\16.0\debug.keystore

(2.b)進入 Dos 模式，切換到 debug.keystore 所在目錄，並執行以下指令

keytool -list -v -keystore debug.keystore -alias androiddebugkey -storepass android -keypass android

(2.c)指令執行後，你會得到類似以下的資訊，其中我們需要的是 SHA1 的資訊

(3)使用瀏覽器登入 Google 帳號，切換到 Google APIs Console 頁面，左邊選擇 Services，然後確認右邊清單中的「Google Maps Android API v2」是 On 的

(4)接下來左邊清單切換到 API Access 選項，點選右邊 Simple API Access 大項中的「Create New Android Key」

(5)「Create New Android Key」button 按下去之後會出現如下的對話框，這時候需要將之前取得的 SHA1 填入，並將需要用到此服務的 app package name 一併填入，兩者以分號隔開

(6)按下 Create 之後，Google 就會給你一組 API Key

(7)接下來回到 delphi，開啟 Project > Options > Version Info，填寫正確的 package name 與 api key

(8)再切換到 Project > Options > Entitlement List，將 Maps Service 設定為 True

大功告成，如果都沒問題的話，你應該就可以在 iOS 或 android 上順利執行這個範例程式了

仔細觀察這個範例以及 TMapView 的 source code，你可以發現這個元件大致有下述的功能

(1)將地圖中心點, 定在某個經緯度

(2)設定 zoom level

(3)地圖旋轉

(4)在地圖上顯示 marker(標記)

(5)切換不同的地圖顯示型態(標準、衛星、混合式)

(6)畫圓、畫線、畫多邊形，以下是畫線

實機展示(第一張為 iOS，第二張為 android)

整體來說操作很順暢，地圖在移動或是放大縮小的時候，也不會有空白或延遲的狀況...

可惜第一版總是有美中不足之處，如果想要做到路徑規劃的話呢？像這樣

從 A 點出發到 B 點，途中要經過 1、2、3、4、5 共五個地點，如何求出最佳路徑並畫在地圖上....

看來目前的 TMapView 暫時是做不到的...殘念

還是繼續用筆者自己的解決方案吧...WebBrowser + Javascript...不需要申請 API Key，還可以跨更多平台(Windows、OSX、iOS 與 Android)，source code 也是共用的...只是所有平台都是使用 Google Map 就是了...看看下一版 TMapView 有沒有機會把這部分也整合進來嚕...

to be continued....