uni-app 打包H5腾讯地图无法导航

645 阅读1分钟

最近几天用uni-app开发安卓和iOS应用,打包成APP安装包后,APP内做地图导航没有问题,APP内使用的是高德地图;但是打包成为H5页面后,运行在微信内置浏览器或者运行在第三方浏览器(UC/QQ浏览器),默认运行的是腾讯地图,地图可以打开,却无法进行导航。

放弃uni-app 内置的 uni.openLocation() 方法,直接使用腾讯地图位置组件,

// 页面 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>

<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>