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

宠辱不惊，看庭前花开花落；去留无意，望天上云卷云舒。——《洪应明》 国内三⼤地图（腾讯、⾼德、百度）路线规划功能的整合 写在前⾯ 基于导航到门店的需求，于是有了这⼀个随笔，例如⼀些社区团购，⾃提点导航的功能，同样适⽤的。 话不多说，开整 ⼀、先定⼀个⽬标点（这个通常是通过接⼝获取的） 建议通过腾讯地图坐标拾取器进⾏拾取坐标 因为腾讯和⾼德⽤的坐标类型都是gcj02，⽽百度⽤的是bd09ll，所以很显然的我们会设置⽬标点的坐标类型为gcj02的，后⾯再进⾏转换 （⽂末有）就好了。（这些坐标类型这⾥不做深究） 以⼴州塔为例 const to = { lng: 113.32446, lat: 23.10647, city: ⼴州市, name: ⼴州塔 } ⼆、腾讯地图 我们可以注意下下⾯框出来的那⼀句话 所以我写代码的时候也没有带上起点 贴代码 1 function goQQ() { 2 location = + 3 to.name + tocoord= + to.lat + , + to.lng + policy=1referer=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77 4 }; 三、⾼德地图 和腾讯地图⼀样，⾼德地图也不需要传⼊起点，默认为当前位置，在微信内置浏览器内可能⽆法获取到当前位置哦，需要⽤第三⽅浏览器打 开 贴代码 function goGd() { location = + to.lat + , + to.lng + , + to.name + src=mypagecoordinate=gaodecallnative=0 }; 四、百度地图 往下翻，找到2.2.3公交、驾车、步⾏路线规划 可以看到框出来的点都是必选的 这时候我们就得做⼀些动作了 其身正，不令而行；其身不正，虽令不从。——《论语》 宠辱不惊，看庭前花开花落；去留无意，望天上云卷云舒。——《洪应明》 1、获取当前位置 1.1 先申请百度云的Key 1.2 html引⼊API script src= 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 == nul