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

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

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)

      }

### H5唤起高德地图百度地图、腾讯地图进行导航的插件或API解决方案 在H5页面中唤起高德地图百度地图、腾讯地图等原生地图应用进行导航,可以通过URL Scheme或Intent的方式实现[^1]。以下是具体的实现方法相关插件或API解决方案: #### 1. 使用URL Scheme唤起地图应用 URL Scheme是许多移动应用提供的协议支持,用于从外部链接直接打开特定的应用程序。以下是各地图应用的URL Scheme调用方式: - **高德地图** 高德地图提供了丰富的URL Scheme接口,可以实现导航、搜索地点等功能。例如,以下代码可以唤起高德地图并设置起点终点进行导航: ```html <a href="amapuri://route/plan/?dlat=39.908721&dlon=116.397499&dname=目的地名称&t=0">唤起高德地图导航</a> ``` 参数说明:`dlat`为目的地纬度,`dlon`为目的地经度,`dname`为目的地名称,`t`表示出行方式(0:驾车;1:步行;2:公交)[^1]。 - **百度地图** 百度地图也支持通过URL Scheme唤起导航功能。以下是一个示例: ```html <a href="baidumap://map/direction?destination=latlng:39.908721,116.397499|name:目的地名称">唤起百度地图导航</a> ``` 参数说明:`destination`指定目标位置,可以使用经纬度或者名称[^1]。 - **腾讯地图** 腾讯地图同样支持URL Scheme调用。以下是一个示例: ```html <a href="qqmap://map/routeplan?type=drive&from=起点名称&to=目的地名称&policy=0">唤起腾讯地图导航</a> ``` 参数说明:`type`表示出行方式(drive:驾车;walk:步行;bus:公交),`from`为起点名称,`to`为目标地点名称,`policy`表示路径规划策略。 #### 2. 使用Intent唤起Android原生地图应用 对于Android设备,可以通过Intent协议唤起地图应用。例如,以下代码可以唤起支持的地图应用进行导航: ```html <a href="intent://map/dir?daddr=39.908721,116.397499#Intent;scheme=geo;package=com.autonavi.minimap;end">唤起地图应用导航</a> ``` 上述代码中的`package`参数指定了目标应用的包名,`com.autonavi.minimap`为高德地图的包名。如果需要唤起其他地图应用,可以替换为相应的包名[^1]。 #### 3. 使用第三方库 `callapp-lib` 为了简化跨平台的URL Scheme或Intent调用,可以使用第三方库如 `callapp-lib`。该库封装了常见的URL SchemeIntent调用逻辑,开发者只需传入对应的参数即可完成调用。以下是一个简单的使用示例: ```javascript const CallApp = require('callapp-lib'); // 唤起高德地图导航 CallApp.call({ appName: '高德地图', appUrl: 'amapuri://route/plan/?dlat=39.908721&dlon=116.397499&dname=目的地名称&t=0', fallbackUrl: 'https://uri.amap.com/navigation' // 如果应用未安装,则跳转到网页版 }); ``` #### 4. 注意事项 - 在调用URL Scheme或Intent时,需确保用户已安装对应的地图应用。如果未安装,建议提供一个备用方案,例如跳转到网页版地图服务。 - 不同地图应用的URL Scheme参数可能存在差异,调用前需仔细查阅官方文档。 ### 示例代码 以下是一个完整的HTML示例,展示如何通过H5页面唤起高德地图百度地图腾讯地图进行导航: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>H5唤起地图导航</title> </head> <body> <h3>唤起高德地图导航</h3> <a href="amapuri://route/plan/?dlat=39.908721&dlon=116.397499&dname=目的地名称&t=0">高德地图导航</a> <h3>唤起百度地图导航</h3> <a href="baidumap://map/direction?destination=latlng:39.908721,116.397499|name:目的地名称">百度地图导航</a> <h3>唤起腾讯地图导航</h3> <a href="qqmap://map/routeplan?type=drive&from=起点名称&to=目的地名称&policy=0">腾讯地图导航</a> </body> </html> ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值