WEB端唤起 百度|腾讯|高德 地图一键导航功能

WEB端唤起 百度|腾讯|高德 地图一键导航功能

目录

腾讯地图:

百度地图:

高德地图:

坐标拾取器:


腾讯地图:

极简写法:
https://3gimg.qq.com/lightmap/v1/marker/index.html?marker=coord:纬度,经度;title:地点名称没有则根据经纬度自去填充;addr:地点位置地址信息没有则根据经纬度自去填充

https://mapapi.qq.com/web/mapComponents/locationMarker/v/index.html?marker=coord:纬度,经度;title:地点名称没有则根据经纬度自去填充;addr:地点位置地址信息没有则根据经纬度自去填充

例:
https://3gimg.qq.com/lightmap/v1/marker/index.html?marker=coord:31.69296,117.289663;title:首创奥特莱斯;addr:安徽省合肥市包河区徽州大道与珠江路交口东北侧

https://mapapi.qq.com/web/mapComponents/locationMarker/v/index.html?marker=coord:31.69296,117.289663;title:首创奥特莱斯;addr:安徽省合肥市包河区徽州大道与珠江路交口东北侧

以下可以省略(极简写法后拼接):
&Breferer=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77
&key=TKUBZ-D24AF-GJ4JY-JDVM2-IBYKK-KEBCU
&referer=tengxun 或 &referer=pcqq 或 &referer=myapp 或 &referer=com.tencent.map
&ch=uri-api
&ADTAG=uri-api.other 或 &ADTAG=uri-api.pcqq 或 &ADTAG=uri-api.com.tencent.map 或 &ADTAG=uri-api.dinju 或 &ADTAG=uri-api.myapp

百度地图:

地图标点功能-调用该接口可调起PC或web地图,且在指定坐标点上显示点的名称和内容信息。
http://api.map.baidu.com/marker?location=纬度,经度&title=标题-地点名称&content=内容-地点位置地址信息&output=html&src=webapp.baidu.openAPIdemo
例:
http://api.map.baidu.com/marker?location=31.698751,117.296253&title=首创奥特莱斯&content=安徽省合肥市包河区徽州大道与珠江路交口东北侧&output=html&src=webapp.baidu.openAPIdemo

反向地址解析-调用该接口可调起PC或Web百度地图,经过逆地理编码后,以标注形式显示位置和地址信息
例:
http://api.map.baidu.com/geocoder?location=31.698751,117.296253&title=首创奥特莱斯&content=安徽省合肥市包河区徽州大道与珠江路交口东北侧&output=html&src=webapp.baidu.openAPIdemo

POI地点检索-调用该接口可调起PC或Web百度地图,通过本地检索服务,以列表形式显示符合查询条件的点。
例:
http://api.map.baidu.com/place/search?query=合肥首创奥特莱斯&location=31.698751,117.296253&radius=1000&region=合肥&output=html&src=webapp.baidu.openAPIdemo


点击上图列表项跳转,最终获取的重新参数 uid=4e71a51b0b7190c6f42310ed ,跳转后链接如下,重要参数(uid=4e71a51b0b7190c6f42310ed):
https://map.baidu.com/mobile/webapp/place/detail/uid=4e71a51b0b7190c6f42310ed

路线搜索-填充终点信息:
https://map.baidu.com/mobile/webapp/place/linesearch/foo=bar/from=place&end=word=输入的终点&point=终点纬度,终点经度&uid=&navi_x=终点纬度&navi_y=终点经度&tab=line&routeType=2
例:
https://map.baidu.com/mobile/webapp/place/linesearch/foo=bar/from=place&end=word=首创奥特莱斯&point=31.698751,117.296253&uid=&navi_x=31.698751&navi_y=117.296253&tab=line&routeType=2

高德地图:

https://uri.amap.com/marker?position=经度,纬度&name=地点名称
例:
https://uri.amap.com/marker?position=117.29,31.69&name=首创奥特莱斯

坐标拾取器:

腾讯地图:
https://lbs.qq.com/getPoint/
百度地图:
http://api.map.baidu.com/lbsapi/getpoint/index.html
高德地图:
https://lbs.amap.com/tools/picker

### 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 Scheme和Intent调用逻辑,开发者只需传入对应的参数即可完成调用。以下是一个简单的使用示例: ```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、付费专栏及课程。

余额充值