15.小程序接入百度地圖獲取地理位置

使用方法

 

 

版本說明

該套API免費對外開放，目前最新版本爲微信小程序JavaScript API V1.0。

註冊百度帳號，成爲百度地圖開發者

進入百度開放平臺官網，點擊右上角「API控制檯」，註冊成爲百度地圖開發者。若是未登陸百度帳號，會引導登陸百度帳號。若是帳號未註冊，請根據提示填寫正確的郵箱及手機號完成開發者註冊流程。

建立應用

再次點擊進入控制檯，建立一個新應用。

獲取密鑰（AK）

在建立應用頁面，錄入應用名稱、選擇應用類型爲"微信小程序"、勾選啓用服務、填寫AppID(小程序ID)。點擊提交後，便可在查看應用頁面看到申請成功的密鑰（AK）。

配置環境

 

1建立本地小程序項目

① 打開微信小程序開發者工具並使用微信確認登陸。

② 點擊 "+" 按鈕，添加項目。

③ 點擊 "添加項目" 按鈕，項目建立完成。

注意：需勾選"在當前目錄中建立quick start項目"。

2引入JS模塊

在項目根目錄下新建一個路徑，下載百度地圖微信小程序JavaScript API，解壓後獲得 bmap-xw.js 文件，將其拷貝到新建的路徑下，安裝完成。

以下圖所示，新建路徑 "libs" ,將 bmap-xw.js 文件拷貝至 "libs" 路徑下。

Hello 個人小程序

 

1微信小程序開發者工具

前往微信小程序開發者頁面，下載並安裝微信小程序開發者工具。

2準備百度地圖微信小程序JavaScript API相關配置

① 獲取開發者密鑰（AK）。獲取方法請查看：帳號和密鑰
② 從相關下載頁面下載開發包並解壓，獲得 bmap-wx.js 文件。

3建立項目

該處請參考使用前 -> 配置環境 , 按步驟將解壓後的 bmap-xw.js 文件拷貝至相應位置。

4設置請求合法域名

① 須要設置請求合法域名，才能正常使用百度小程序 JavaScript API。

登陸微信公衆平臺－> "設置" －> "開發設置" －> "request 合法域名" －>添加 api.map.baidu.com －> 點擊"保存並提交"，如圖所示： 

② 打開開發者工具 －> "項目" －> 點擊"刷新"，合法域名設置同步完成。如圖所示： 

5編輯和預覽個人小程序

如上步驟完成後，即爲已配置好一個完整的調用百度地圖微信小程序JavaScript API的完整小程序Demo。

6編輯代碼
注：此處使用的ak是隨便寫的，你們須要自行申請！！！
xxx.wxml：

 

xxx.js：