国内三大地图（腾讯、高德、百度）路线规划功能的整合

写在前面

基于导航到门店的需求，于是有了这一个随笔，例如一些社区团购，自提点导航的功能，同样适用的。

 

话不多说，开整

一、先定一个目标点（这个通常是通过接口获取的）

建议通过腾讯地图坐标拾取器进行拾取坐标

腾讯地图坐标拾取器

因为腾讯和高德用的坐标类型都是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 };

 

完整代码　　戳我

 

附上百度转腾讯的代码

 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 }

 

对你有用的话，点个推荐吧！