具体使用查看二维码
前言:
最近几天用uni-app开发安卓和iOS应用,打包成APP安装包后,APP内做地图导航没有问题,APP内使用的是高德地图;但是打包成为H5页面后,运行在微信内置浏览器或者运行在第三方浏览器(UC/QQ浏览器),默认运行的是腾讯地图,地图可以打开,却无法进行导航。
具体错误可查看帖子:https://ask.dcloud.net.cn/question/86216
##前置条件:
- 开发环境:windows;
- 开发框架:uni-app , H5+,nativeJS;
- 增加了 图片拖拽 功能,你可以将本地的图片直接拖拽到编辑区域直接展示;
- 编辑器:HbuilderX;
- 兼容版本:安卓,IOS已作测试;
此代码可以直接复制到uni-app项目中使用
解决方案如下:
- 放弃uni-app 内置的 uni.openLocation() 方法,直接使用腾讯地图位置组件,
腾讯地图位置展示组件文档:
https://lbs.qq.com/webApi/component/componentGuide/componentMarker - 进入文档地址后,拉到最底部,有个预览,扫描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.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>
- 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>
至此全代码结束