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

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

具體使用掃描二維碼查看

 

前言：

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

 

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

前置條件：

1. 開發環境：windows

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

3. 編輯器：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
<template>
  <view>
    // view_nav 函數里面傳入經緯度,點擊view_nav會跳轉到web_view頁面
    <view class="see" @click="view_nav(info.longitude, info.latitude)">查看導航</view>
  </view>
</template>
<script>
  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頁面

<template>
  <view>
    // 頁面A跳轉過來攜帶的url參數
    <web-view :src="url"></web-view>
  </view>
</template

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

至此全代碼結束