在Cordova中使用Google Maps API (Visual Studio 2017)

By | 2018-03-07

目前許多APP都有地圖導覽的功能,在Visual Studio 2017的Cordova中,我們可以利用Google提供的API加上Geolocation外掛,達成地圖導覽的功能。

APP預覽

當你在APP上點擊顯示地圖的按鈕時,這時會在 APP 的畫面上載入Google Maps的地圖,並將地點定位在你目前所在的位置,如下面的APP預覽圖所示。

Google Maps APP 預覽

(Google Maps APP預覽畫面)

APP開發環境及測試環境

開發軟體:Visual Studio 2017

API:Google Maps JavaScript API (需事先申請API的金鑰)

測試環境:Android 6.0

套件及外掛程式:jQuery mobileGeolocation

開發Google Maps定位系統的事先準備

在開始開發APP前,首先必須要先完成二件事,第一件事是先新增這次APP會用到的套件跟外掛,第二件事則是要申請Google Maps JavaScript API,以下就分別針對這二件事做一個說明。

  • 新增 jQuery mobile 套件及 Geolocation 外掛

載入jQuery mobile教學

載入Geolocation外掛教學

  • 申請 Google Maps JavaScript API

    首先到Google搜索引擎上,輸入關鍵字google maps api,並點選Google Maps JavaScript API。申請Google Maps Javascript API
    點選取得金鑰,並登入你自己的Google帳號。取得Google Maps Javascript API

    登入後,再次點選取得金鑰,然後建立一個新的專案。新增Google Maps Javascript API專案
    接著你就會拿到屬於你自己的API Key,這一個在後續的步驟中,將會使用到;若你要觀看更多API的訊息,你可以點選API Console觀看。取得申請完成的Gogle Maps Javascript API Key

使用Google Maps教學

  1. 開啟Visual Studio 2017,並建立一個新的Cordova專案。
  2. 載入jQuery mobile套件Geolocation外掛
  3. 在www/index.html中,設計APP的版面,建立一個按鈕(id為show_map)及顯示Google Maps的Div區塊(id為map)。

    Google Maps APP 預覽

  4. 更改www/index.html中的<meta http-equiv=”Content-Security-Policy”> (若沒有修改,那麼使用Google Maps Javascrit API時將會有錯誤出現)

  5. 在www/index.html中,引用Google Maps Javascript API(可放在引用jQuery之前)

  6. 建立當使用者按下顯示地圖按鍵時的動作(www/scripts/index.js)

     

  7. 在地圖上建立地標(在上一個步驟中的onSuccess函式裡面新增)

  8. 當點擊地標時,顯示該地標的資訊

  9. 完成畫面預覽Google Maps APP 預覽

完整範例

若要觀看Google Maps更詳細的設定,可以至Google Maps API官網觀看。

範例下載網址:http://katfile.com/1a354sk84tfp/googlemaps.rar.html

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *