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

雷杰人力资源 發表於 2020-8-31 11:00:00

uni-app 打包H5腾讯地图无法导航
具体使用扫描二维码查看
 
<img src="https://mp.weixin.qq.com/mp/qrcode?scene=10000004&size=102&__biz=Mzg3NTAzMzAxNA==&mid=100000209&idx=1&sn=7067d76286cd461d8ddc0ce0bc5f9042&send_time=1598842280">
前言：
最近几天用uni-app开发安卓和iOS应用，打包成APP安装包后，APP内做地图导航没有问题，APP内使用的是高德地图；但是打包成为H5页面后，运行在微信内置浏览器或者运行在第三方浏览器（UC/QQ浏览器），默认运行的是腾讯地图，地图可以打开，却无法进行导航。
 
具体错误可查看帖子：https://ask.dcloud.net.cn/question/86216
前置条件：
<ol class="list-paddingleft-2">
<li>
开发环境：windows
</li>
<li>
开发框架：uni-app , H5+，nativeJS
</li>
<li>
编辑器：HbuilderX
</li>
</ol>
   4.兼容版本：安卓，IOS已作测试
此代码可以直接复制到uni-app项目中使用
 
 
解决方案如下：
1. 放弃uni-app 内置的 uni.openLocation() 方法，直接使用腾讯地图位置组件，
<h2>腾讯地图位置展示组件文档：https://lbs.qq.com/webApi/component/componentGuide/componentMarker</h2>
2. 进入文档地址后，拉到最底部，有个预览，扫描URL传递数据的二维码，在浏览器打开，将其中的地址复制黏贴出
<img src="https://img2020.cnblogs.com/blog/1699129/202008/1699129-20200831105814607-67472103.jpg">
 
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代码
<div class="cnblogs_code">
<pre>// 页面 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></pre>
</div>
5. web_view页面
<div class="cnblogs_code">
<pre><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></pre>
</div>
至此全代码结束 
来源：https://www.cnblogs.com/ts119/p/13588446.html

頁: [1]

琼殿技术论坛's Archiver

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