H5直接唤起高德地图导航APP和唤起百度地图导航APP

本文介绍了如何在Android应用中实现从百度地图和高德地图API的切换,处理GPS/WGS84坐标转换,以及优化APP唤起过程以提升用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.百度地图官方文档:地图调起API | 百度地图API SDK

2.高德地图官方文档: 路径规划-Android-开发指南-高德地图手机版 | 高德地图API

if (val.name == '高德') {

        // 手机获取的是百度坐标,百度坐标转高德

        let lng = bd09togcj02(this.lng, this.lat)[0]

        let lat = bd09togcj02(this.lng, this.lat)[1]

        // 工单返回的终点经纬度是GPS的,即WGS84的坐标,所以需要转成高德的

        let lngEnd = wgs84togcj02(this.currentData.longitude, this.currentData.latitude)[0]

        let latEnd = wgs84togcj02(this.currentData.longitude, this.currentData.latitude)[1]

        // 直接唤起高德APP

        window.location.href = `amapuri://route/plan/?sourceApplication=amap&sid=&slat=${lat}&slon=${lng}&sname=当前位置&did=&dlat=${latEnd}&dlon=${lngEnd}&dname=目的地&dev=0&t=0`

        //判断是否跳转

        // setTimeout(function () {

        //   let hidden =

        //     window.document.hidden ||

        //     window.document.mozHidden ||

        //     window.document.msHidden ||

        //     window.document.webkitHidden

        //   if (typeof hidden == 'undefined' || hidden == false) {

        //     //调用高德地图

        //     window.location.href = 'https://uri.amap.com/marker?position=' + lng + ',' + lat + '&name=' + '上海市政府'

        //   }

        // }, 2000)

      } else if (val.name == '百度') {

        // 工单返回的终点经纬度是GPS的,即WGS84的坐标,所以需要转成百度的

        let lngEnd = convertLngLat(this.currentData.longitude, this.currentData.latitude)[0]

        let latEnd = convertLngLat(this.currentData.longitude, this.currentData.latitude)[1]

        // //安卓操作系统

        // let d = new Date()

        // let t0 = d.getTime()

        // 直接唤起百度APP

        window.location.href = `baidumap://map/direction?origin=${this.lat},${this.lng}&destination=${latEnd},${lngEnd}&coord_type=bd09ll&mode=driving&src=andr.baidu.openAPIdemo`

        // //由于打开需要1~2秒,利用这个时间差来处理--打开app后,返回h5页面会出现页面变成app下载页面,影响用户体验

        // var delay = setInterval(function () {

        //   var d = new Date()

        //   var t1 = d.getTime()

        //   if (t1 - t0 < 3000 && t1 - t0 > 2000) {

        //     window.location.href =

        //       'http://api.map.baidu.com/marker?location=' +

        //       lat +

        //       ',' +

        //       lng +

        //       '&title=' +

        //       self.partnerAddress +

        //       '&content=景点&output=html&src=webapp.baidu.openAPIdemo'

        //   }

        //   if (t1 - t0 >= 3000) {

        //     clearInterval(delay)

        //   }

        // }, 1000)

      }

### 集成高德地图API实现导航功能 #### 获取高德地图Key 为了在UniApp H5页面中集成高德地图并实现导航功能,首先需要前往高德开放平台申请应用的key。特别注意,在创建应用时需针对Web端(JS API)申请key,因为其他类型的key可能会导致key值不匹配错误[^1]。 #### 创建HTML结构 定义好页面的基础布局,确保有用于展示地图的容器: ```html <div id="container"></div> ``` #### 初始化地图实例 利用`<script>`标签引入高德地图JavaScript API,并初始化地图对象。由于部分uni-app内置方法可能无法正常工作于此场景下,因此推荐采用传统方式编写脚本逻辑并将所需参数传递给渲染层(renderjs)[^2]。 ```javascript // 引入高德地图API <script src="//webapi.amap.com/maps?v=1.4.15&key=您的密钥"></script> // 地图初始化函数 function initMap() { var map = new AMap.Map('container', { zoom: 10, // 设置缩放级别 center: [经度, 纬度], // 中心点坐标 }); } ``` #### 添加导航控件 为了让用户能够方便地发起路线规划请求,可以在界面上添加按钮或其他交互元素来触发导航操作。当点击这些元素时,调用AMapDriving或类似的接口完成路径计算与显示。 ```javascript document.getElementById('navigateButton').addEventListener('click', function () { var drivingOption = { policy: AMap.DrivingPolicy.LEAST_TIME, origin: '起点经纬度', destination: '终点经纬度' }; var driving = new AMap.Driving(drivingOption); driving.search(function (status, result) { if (status === 'complete') { console.log('成功绘制驾车线路'); } else { console.error('失败:', result.info); } }); }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值