写在前面
基于导航到门店的需求，于是有了这一个随笔，例如一些社区团购，自提点导航的功能，同样适用的。
话不多说，开整
一、先定一个目标点（这个通常是通过接口获取的）
建议通过腾讯地图坐标拾取器进行拾取坐标
因为腾讯和高德用的坐标类型都是gcj02，而百度用的是bd09ll，所以很显然的我们会设置目标点的坐标类型为gcj02的，后面再进行转换（文末有）就好了。（这些坐标类型这里不做深究）
以广州塔为例
const to = {
lng: 113.32446,
lat: 23.10647,
city: '广州市',
name: '广州塔'
}
二、腾讯地图
官方文档https://lbs.qq.com/webApi/uriV1/uriGuide/uriWebRoute
我们可以注意下下面框出来的那一句话
所以我写代码的时候也没有带上起点
贴代码
1 function goQQ() {
2 location = 'https://apis.map.qq.com/uri/v1/routeplan?type=drive&to=' +
3 to.name + '&tocoord=' + to.lat + ',' + to.lng + '&policy=1&referer=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77'
4 };
三、高德地图
官方文档https://lbs.amap.com/api/uri-api/guide/travel/route
和腾讯地图一样，高德地图也不需要传入起点，默认为当前位置，在微信内置浏览器内可能无法获取到当前位置哦，需要用第三方浏览器打开
贴代码
function goGd() {
location = 'https://uri.amap.com/navigation?from=&to=' + to.lat + ',' + to.lng + ',' + to.name +
'&src=mypage&coordinate=gaode&callnative=0'
};
四、百度地图
官方文档https://lbsyun.baidu.com/index.php?title=uri/api/web
往下翻，找到 2.2.3公交、驾车、步行路线规划
可以看到框出来的点都是必选的
这时候我们就得做一些动作了
1、获取当前位置
1.1 先申请百度云的Key
https://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey ;
1.2 html引入API
<script src="https://api.map.baidu.com/api?v=2.0&ak=pQWl932IkCMb3elP8MpLCyUsWTkFCFGm">script>
1.3 获取当前位置信息
1 //获取当前位置信息
2 function getPoint() {
3 return new Promise((resolve, reject) => {
4 let point = {}; //初始化当前坐标信息
5 let geolocation = new BMap.Geolocation();
6 geolocation.getCurrentPosition(function(r) { //当前坐标信息
7 if (this.getStatus() == BMAP_STATUS_SUCCESS) {
8 mk = new BMap.Marker(r.point);
9 point.lng = r.point.lng; //经度
10 point.lat = r.point.lat; //纬度
11 let gc = new BMap.Geocoder();
12 gc.getLocation(r.point, function(rs) { //逆地址解释
13 point.city = rs.addressComponents.city; //当前城市
14 resolve(point);
15 });
16 } else {
17 alert('failed' + this.getStatus());
18 }
19 });
20 })
21 }
2、转换终点坐标为百度经纬度坐标
1 /**
2 * 腾讯地图坐标转换百度地图坐标
3 * lng 腾讯经度
4 * lat 腾讯纬度
5 */
6 function qqMapToBMap(lng, lat) {
7 if (lng == null || lng == '' || lat == null || lat == '')
8 return [lng, lat];
9 var x_pi = 3.14159265358979324;
10 var x = parseFloat(lng);
11 var y = parseFloat(lat);
12 var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
13 var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
14 var lng = (z * Math.cos(theta) + 0.0065).toFixed(5);
15 var lat = (z * Math.sin(theta) + 0.006).toFixed(5);
16 return [lng, lat];
17 };
3、上代码
1 //因为百度地图当前定位是异步获取的一个方式，所以要使用async/await
2 async function goBd() {
3 //等待异步获取数据
4 await getPoint().then(point => {
5 let destination = qqMapToBMap(to.lng, to.lat); //腾讯地图坐标转百度地图坐标
6 let destination_lng = destination[0];
7 let destination_lat = destination[1];
8 location =
9 'http://api.map.baidu.com/direction?origin=latlng:' + point.lat +
10 ',' + point.lng +
11 '|name:我的位置&destination=latlng:' + destination_lat + ',' + destination_lng + '|name:' + to
12 .name +
13 '&origin_region=' + point.city + '&destination_region=' + to.city +
14 '&mode=driving&output=html&src=webapp.baidu.openAPIdemo';
15 });
16 };
完整代码 戳我
2021/11/16 已整合成插件
附上百度转腾讯的代码
1 /**
2 * 百度地图坐标转换成腾讯地图坐标
3 * lng 百度经度
4 * lat 百度纬度
5 */
6 function bMapToQQMap(lng, lat) {
7 if (lng == null || lng == '' || lat == null || lat == '')
8 return [lng, lat];
9 var x_pi = 3.14159265358979324;
10 var x = parseFloat(lng) - 0.0065;
11 var y = parseFloat(lat) - 0.006;
12 var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
13 var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
14 var lng = (z * Math.cos(theta)).toFixed(7);
15 var lat = (z * Math.sin(theta)).toFixed(7);
16 return [lng, lat];
17 }
对你有用的话，点个推荐吧！
Original: https://www.cnblogs.com/jae-tech/p/15545495.html
Author: Jae1995
Title: 国内三大地图（腾讯、高德、百度）路线规划功能的整合
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/622106/
转载文章受原作者版权保护。转载请注明原作者出处！