微信小程序JS加載esmap地圖的實例詳解
一、在微信小程序里顯示室內(nèi)三維地圖 需要滿足的兩個條件
調(diào)用ESMap室內(nèi)地圖需要用到小程序web-view
組件,想要通過 web-view 調(diào)用ESMap室內(nèi)地圖需要滿足以下 2 個條件:
1. 小程序是企業(yè)主體,微信 web-view
組件不對個人類型的小程序開放。
2. 您需要有一個自己的域名,在嵌入網(wǎng)頁的時候需要在微信后臺驗證域名(只有自己域名下的網(wǎng)頁才能被正確地顯示哦,不能隨便找一個公開鏈接)。
二、具體實現(xiàn)步驟
1、域名驗證:
由于微信平臺的規(guī)定,web-view
指向的地址,必須是在微信小程序后臺登記的域名,否則會出現(xiàn)“不支持打開非業(yè)務(wù)域名,請重新配置”的提示。
首先我們在微信的后臺找到開發(fā) > 開發(fā)設(shè)置 > 業(yè)務(wù)域名模塊,并填上你需要綁定的域名。
需要注意的是,這里的域名強制 https,需要配置好 https 證書,購買服務(wù)器的時候也要注意購買支持 https 的服務(wù)器。
接下來,我們需要下載一個微信的驗證文件,放在你域名的根目錄下,并且支持訪問。
具體來說,如果您的域名www.esmap.cn,微信的驗證文件是WATLNxupm4.txt,您需要確保https://www.esmap.cn/WATLNxupm4.txt 可以公開訪問。確認無誤之后,點擊保存即可成功保存。
注:小程序所有用到的https請求都需要配置合法域名
2、嵌入帶有室內(nèi)地圖的web-view
這個過程其實很簡單,找到你微信小程序的.wxml文件,添加以下代碼
<web-viewsrc="https://www.esmap.cn /esmap.html"/>
其中 https://www.esmap.cn /esmap.html 是帶有地圖的 H5 頁面
室內(nèi)地圖制作流程,您可以使用下面兩種方式構(gòu)建這個頁面:
1) 從https://www.esmap.cn 官網(wǎng)中復(fù)制測試地圖源碼DEMO,在您自己的服務(wù)器進行免費部署。
2) 參考https://www.esmap.cn 室內(nèi)三維地圖SDK開發(fā)說明,在您已有的 H5 頁面上添加自己制作的室內(nèi)地圖。
3、小程序 web-view 的一些提示
微信小程序的 web-view 只能是全屏的,并且會覆蓋頁面中的所有其他組件。
1) 如果想在網(wǎng)頁中判斷是否處于微信小程序中
var ua = window.navigator.userAgent.toLowerCase(); if (ua.indexOf('micromessenger') == -1) {//說明不在微信中 // 走不在小程序的邏輯 } else { wx.miniProgram.getEnv(function(res) { if (res.miniprogram) { // 走在小程序的邏輯 } else { // 走不在小程序的邏輯 } }) }
2) 如果網(wǎng)頁想給小程序傳遞信息,可以通過 wx.miniProgram.postMessage
方法。
3) 小程序中可以通過 postMessage 方法監(jiān)聽網(wǎng)頁傳遞回來的數(shù)據(jù),但是該方法僅在特定時機(小程序后退、組件銷毀、分享)觸發(fā),沒法實時傳遞消息。
4) 網(wǎng)頁跳轉(zhuǎn)到小程序頁面
wx.miniProgram.navigateTo({ url: '/pages/esmap/esmap?location=' + obj.location });
三、更多效果!
更多室內(nèi)三維地圖引擎例子功能體驗
https://www.esmap.cn/sdk-demo/demo/index.html?tt=cnblogs5
總結(jié)
以上所述是小編給大家介紹的微信小程序JS加載esmap地圖的實例,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
相關(guān)文章
一步一步的了解webpack4的splitChunk插件(小結(jié))
這篇文章主要介紹了一步一步的了解webpack4的splitChunk插件(小結(jié)),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-09-09javascript實現(xiàn)信息的顯示和隱藏如注冊頁面
信息的顯示和隱藏在某些時候還是比較使用的,就比如注冊信息,下面有個不錯的示例,感興趣的朋友可以了解下2013-12-12Bootstrap fileinput文件上傳預(yù)覽插件使用詳解
這篇文章主要為大家詳細介紹了Bootstrap fileinput文件上傳預(yù)覽插件的使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05JavaScript數(shù)組及常見操作方法小結(jié)
這篇文章主要介紹了JavaScript數(shù)組及常見操作方法,結(jié)合實例形式總結(jié)分析了JavaScript數(shù)組的基本獲取、添加、刪除、排序、翻轉(zhuǎn)等相關(guān)操作技巧,需要的朋友可以參考下2019-11-11async/await讓異步操作同步執(zhí)行的方法詳解
這篇文章主要給大家介紹了關(guān)于async/await讓異步操作同步執(zhí)行的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者使用async/await具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11