支付寶小程序室內地圖導航開發-支付寶小程序JS加載esmap地圖

若是是微信小程序開發，請參考微信小程序室內地圖導航開發-微信小程序JS加載esmap地圖文章

1、在支付寶小程序裏顯示室內三維地圖 須要知足的兩個條件

調用ESMap室內地圖須要用到小程序web-view組件，想要經過 web-view 調用ESMap室內地圖須要知足如下 2 個條件：

1. 小程序是企業主體，支付寶 web-view 組件不對我的類型的小程序開放。

2. 您須要有一個本身的域名，在嵌入網頁的時候須要在支付寶後臺驗證域名（只有本身域名下的網頁才能被正確地顯示哦，不能隨便找一個公開連接）。

支付寶小程序管理中心 > 設置 > 開發設置 > H5域名配置 裏設置（以下圖）

2、具體實現步驟

一、域名驗證：

因爲支付寶平臺的規定，web-view 指向的地址，必須是在支付寶小程序後臺登記的域名，不然沒法使用。

首先咱們找到支付寶小程序管理中心 > 設置 > 開發設置 > H5域名配置，並填上你須要綁定的域名。

須要注意的是，這裏的域名強制 https，須要配置好 https 證書，購買服務器的時候也要注意購買支持 https 的服務器。

接下來，咱們須要下載一個支付寶的驗證文件，放在你域名的根目錄下，而且支持訪問。

具體來講，若是您的域名www.esmap.cn，支付寶的驗證文件是WATLNxupm4.txt，您須要確保https://www.esmap.cn/WATLNxupm4.txt 能夠公開訪問。確認無誤以後，點擊保存便可成功保存。

注：小程序全部用到的https請求都須要配置合法域名

二、嵌入帶有室內地圖的web-view

這個過程其實很簡單，找到你支付寶小程序的.wxml文件，添加如下代碼

<web-view src="https://www.esmap.cn /esmap.html"/> 

其中 https://www.esmap.cn /esmap.html 是帶有地圖的 H5 頁面

室內地圖製做流程，您能夠使用下面兩種方式構建這個頁面：

1) 從https://www.esmap.cn 官網中複製測試地圖源碼DEMO，在您本身的服務器進行免費部署。

2) 參考https://www.esmap.cn 室內三維地圖SDK開發說明，在您已有的 H5 頁面上添加本身製做的室內地圖。

三、小程序 web-view 的一些提示

支付寶小程序的 web-view 只能是全屏的，而且會覆蓋頁面中的全部其餘組件。

1) 支付寶小程序給網頁傳遞信息方法

this.webViewContext = my.createWebViewContext('web-view-1'); this.webViewContext.postMessage({'sendToWebView': '1'}); 

2) 若是網頁想給支付寶小程序傳遞信息，能夠經過 my.postMessage({'sendToMiniProgram': '0'}); 方法。

3、支付寶小程序裏面能夠進行藍牙定位導航，由易景空間提供完整的定位導航方案，不用寫一行代碼就能夠完成商場定位導航等方案的現場部署！

4、更多效果！

 

更多室內三維地圖引擎例子功能體驗

https://www.esmap.cn/sdk-demo/demo/index.html?tt=cnblogs6