网站模拟效果,网站如何管理,自己做网站流程,门户网站建设公司报价uni-app 打包H5腾讯地图无法导航前言#xff1a;最近几天用uni-app开发安卓和iOS应用#xff0c;打包成APP安装包后#xff0c;APP内做地图导航没有问题#xff0c;APP内使用的是高德地图#xff1b;但是打包成为H5页面后#xff0c;运行在微信内置浏览器或者运行在第三方… uni-app 打包H5腾讯地图无法导航前言最近几天用uni-app开发安卓和iOS应用打包成APP安装包后APP内做地图导航没有问题APP内使用的是高德地图但是打包成为H5页面后运行在微信内置浏览器或者运行在第三方浏览器(UC/QQ浏览器)默认运行的是腾讯地图地图可以打开却无法进行导航。具体错误可查看帖子https://ask.dcloud.net.cn/question/86216-----------------------分割线-----------------------------前置条件开发环境windows开发框架uni-app , H5nativeJS编辑器HbuilderX 4.兼容版本安卓IOS已作测试此代码可以直接复制到uni-app项目中使用-----------------------分割线-----------------------------最解决方案如下1. 放弃uni-app 内置的 uni.openLocation() 方法直接使用腾讯地图位置组件腾讯地图位置展示组件文档https://lbs.qq.com/webApi/component/componentGuide/componentMarker2. 进入文档地址后拉到最底部有个预览扫描URL传递数据的二维码在浏览器打开将其中的地址复制黏贴出来2.1 扫描二维码后得到的地址https://3gimg.qq.com/lightmap/v1/marker/?markercoord:39.892326,116.342763;title:超好吃冰激凌;addr:手帕口桥北铁路道口referermyappkeyOB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB773.准备一个web_view页面点击查看导航的时候跳转到web_view页面web_view的url地址就是刚才扫描二维码的地址;得到的二维码地址就是步骤2.1的地址。3.1 uni-app 组件 web_view 具体使用详情可参考如下文档https://uniapp.dcloud.io/component/web-view4. 具体代码如下4.1 点击查看地图的页面vue代码// 页面 A view // view_nav 函数里面传入经纬度,点击view_nav会跳转到web_view页面 view classsee clickview_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?urlhttps://3gimg.qq.com/lightmap/v1/marker/?markercoord:latitude,longitudereferermyAppkeyOB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77 }) } }/script5. web_view页面 // 页面A跳转过来携带的url参数 :srcurl /view export default { data() { return { url: }; }, onLoad(e) { // e.url 就是页面 A 跳转过来携带的url参数 this.url e.url; } };/script至此全代码结束
