uni-app 打包H5騰訊地圖無法導航

前言：

最近幾天用uni-app開發安卓和iOS應用，打包成APP安裝包后，APP內做地圖導航沒有問題，APP內使用的是高德地圖；但是打包成為H5頁面后，運行在微信內置瀏覽器或者運行在第三方瀏覽器(UC/QQ瀏覽器)，默認運行的是騰訊地圖，地圖可以打開，卻無法進行導航。

具體錯誤可查看帖子：https://ask.dcloud.net.cn/question/86216

-----------------------分割線-----------------------------

前置條件：

開發環境：windows

開發框架：uni-app , H5+，nativeJS

編輯器：HbuilderX

?? 4.兼容版本：安卓，IOS已作測試

此代碼可以直接復制到uni-app項目中使用

-----------------------分割線-----------------------------

最解決方案如下：

1. 放棄uni-app?內置的?uni.openLocation() 方法，直接使用騰訊地圖位置組件，

騰訊地圖位置展示組件文檔：

https://lbs.qq.com/webApi/component/componentGuide/componentMarker

2. 進入文檔地址后，拉到最底部，有個預覽，掃描URL傳遞數據的二維碼，在瀏覽器打開，將其中的地址復制黏貼出來；

2.1 掃描二維碼后得到的地址：

https://3gimg.qq.com/lightmap/v1/marker/?marker=coord:39.892326,116.342763;title:超好吃冰激凌;addr:手帕口橋北鐵路道口&referer=myapp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77

3.準備一個web_view頁面，點擊查看導航的時候，跳轉到web_view頁面；

web_view的url地址就是剛才掃描二維碼的地址;得到的二維碼地址就是步驟2.1的地址。

3.1 uni-app 組件 web_view 具體使用詳情，可參考如下文檔：

https://uniapp.dcloud.io/component/web-view

4. 具體代碼如下：

4.1 點擊查看地圖的頁面vue代碼

// 頁面 A <view> // view_nav 函數里面傳入經緯度,點擊view_nav會跳轉到web_view頁面 <view class="see" @click="view_nav(info.longitude, info.latitude)">查看導航view> view></template> export default { view_nav: function(longitude, latitude) { ????????/**?????????* 1.頁面跳轉到web_view頁面，頁面跳轉時候攜帶一個url參數????????* 2.url地址就是上面步驟2.1的地址????????*?3.后面的?referer?屬性值換為自己的App名稱，key屬性的值換為自己的騰訊地圖申請的key值??????? **/ uni.navigateTo({ url: '/pages/web_view/web_view?url=https://3gimg.qq.com/lightmap/v1/marker/?marker=coord:'+latitude+','+longitude+'&referer=myApp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77' }) } }</script>

5.?web_view頁面

????//?頁面A跳轉過來攜帶的url參數 :src="url">??</view> export default { data() { return { url: '' }; }, onLoad(e) {??????//?e.url?就是頁面?A?跳轉過來攜帶的url參數 this.url = e.url; } };</script>

至此全代碼結束

總結

以上是生活随笔為你收集整理的server.transfer 无法跳转页面_H5 腾讯地图无法导航的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。