H5 腾讯地图无法导航

墨蓝 2022-12-02 13:47 421阅读 0赞

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

*  前言：
 *   *  解决方案如下：

具体使用查看二维码  
![在这里插入图片描述][qrcode_scene_10000004_size_102_biz_Mzg3NTAzMzAxNA_mid_100000209_idx_1_sn_7067d76286cd461d8ddc0ce0bc5f9042_send_time_1598842280_pic_center]

# 前言： #

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

[具体错误可查看帖子：https://ask.dcloud.net.cn/question/86216][https_ask.dcloud.net.cn_question_86216]

\#\#前置条件：

1.  开发环境：windows；
2.  开发框架：uni-app , H5+，nativeJS；
3.  增加了 **图片拖拽** 功能，你可以将本地的图片直接拖拽到编辑区域直接展示；
4.  编辑器：HbuilderX；
5.  兼容版本：安卓，IOS已作测试；  
    此代码可以直接复制到uni-app项目中使用

## 解决方案如下： ##

1.  放弃uni-app 内置的 uni.openLocation() 方法，直接使用腾讯地图位置组件，  
    [腾讯地图位置展示组件文档：  
    https://lbs.qq.com/webApi/component/componentGuide/componentMarker][https_lbs.qq.com_webApi_component_componentGuide_componentMarker]
2.  进入文档地址后，拉到最底部，有个预览，扫描URL传递数据的二维码，在浏览器打开，将其中的地址复制黏贴出来；  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RTXzE0NDYzNg_size_16_color_FFFFFF_t_70_pic_center]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 具体使用详情，可参考如下文档][uni-app _ web_view]：

[https://uniapp.dcloud.io/component/web-view][uni-app _ web_view]

1.  具体代码如下：

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>

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

至此全代码结束

[qrcode_scene_10000004_size_102_biz_Mzg3NTAzMzAxNA_mid_100000209_idx_1_sn_7067d76286cd461d8ddc0ce0bc5f9042_send_time_1598842280_pic_center]: /images/20221123/202d0985cd664913a7fd655391ee8c96.png
[https_ask.dcloud.net.cn_question_86216]: https://ask.dcloud.net.cn/question/86216
[https_lbs.qq.com_webApi_component_componentGuide_componentMarker]: https://lbs.qq.com/webApi/component/componentGuide/componentMarker
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RTXzE0NDYzNg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/4fce6477104e40e09c079cbddd0f9a16.png
[uni-app _ web_view]: https://uniapp.dcloud.io/component/web-view