百度地图批量转换 GPS坐标转百度地图坐标问题

百度地图的官方网址
官方批量转换的demo

花了几天时间了解了一下百度地图，之前是后端的一个小伙伴在负责，他跟我吐槽这是前端的东西，让我来写（之前他们老大交给他了，我也以为是后端的任务(๑′ᴗ‵๑)。。）
言归正传，开始解决问题吧！

两种方法：
一、一个一个的转
二、批量转换

看一下官网示例：

    var points = [new BMap.Point(116.3786889372559,39.90762965106183),new BMap.Point(116.38632786853032,39.90795884517671),new BMap.Point(116.39534009082035,39.907432133833574),new BMap.Point(116.40624058825688,39.90789300648029),new BMap.Point(116.41413701159672,39.90795884517671)];//地图初始化var bm = new BMap.Map("allmap");bm.centerAndZoom(new BMap.Point(116.378688937,39.9076296510), 15);//坐标转换完之后的回调函数translateCallback = function (data){if(data.status === 0) {for (var i = 0; i < data.points.length; i++) {bm.addOverlay(new BMap.Marker(data.points[i]));bm.setCenter(data.points[i]);}}}setTimeout(function(){var convertor = new BMap.Convertor();convertor.translate(points, 1, 5, translateCallback)}, 1000);

1. 一个一个的转（经粗略测试600条以内没什么问题，数据量大的不建议此方法），参考https://bbs.csdn.net/topics/392444544

this.axios('接口',参数)
.then(res => {var map = new BMap.Map("iotmap");  // 创建地图实例 id="iotmap"map.addControl(new BMap.MapTypeControl());//显示地图，卫星，三维map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放          // map.centerAndZoom(point) 中心点是坐标转换后数据中的第一个点let ggPoint = {};   //修改后台传过来的数据格式let pointsArr = [];   //用来储存所有的坐标点for(var i = 0; i< res.list.length; i++){//res.list[i].devLong, res.list[i].devLat是后台传过来的gps坐标ggPoint = new BMap.Point( res.list[i].devLong, res.list[i].devLat );pointsArr.push(ggPoint);}          //1.坐标转换-----startlet translateArr = []; //坐标转换后的所有坐标集合//坐标转换完之后的回调函数var translateCallback = function (data){if(data.status === 0) {translateArr.push(data.points[0]);//因为是一个一个进行转换的，这里判断转换前和转换后的数组长度，如果相等，说明全部转换完了console.log(translateArr)if(translateArr.length == pointsArr.length) {map.centerAndZoom(new BMap.Point(translateArr[0].lng,translateArr[0].lat), 10);  // 设置中心点for(let i = 0; i<translateArr.length; i++){//连线----start    转换后，相邻的两个点连线//if(i<translateArr.length-1){              //  var polyline = new BMap.Polyline([//    new BMap.Point(translateArr[i].lng, translateArr[i].lat),//    new BMap.Point(translateArr[i+1].lng, translateArr[i+1].lat)//    ],//    {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}//    );//  map.addOverlay(polyline);//}//连线----end//标注var marker = new BMap.Marker(translateArr[i]);        // 创建标注    map.addOverlay(marker);                     // 将标注添加到地图中 //标注//只有数组的第一个点和最后个点才显示标注if(i == 0 || i == translateArr.length-1){  var marker = new BMap.Marker(translateArr[i]); // 创建标注 map.addOverlay(marker); // 将标注点添加到地图中//监听标注事件marker.addEventListener("click", function(e){    console.log("e",e)      //这里建议使用e.target.point.lng，而不用e.point.lng，因为e.point.lng可能存在误差var infoWindow = new BMap.InfoWindow("经度："+e.point.lng+"<br/>纬度："+e.point.lat, opts);map.openInfoWindow(infoWindow, e.target.point);    // 打开信息窗口});  }                  }}}}setTimeout(function(){for(var i=0; i<pointsArr.length; i++){var arr=[pointsArr[i]]var convertor = new BMap.Convertor();convertor.translate(arr, 1, 5, translateCallback);}}, 1000);
}).catch(function (error) {console.log(error);
});

2. 批量转换 参考-麦田
将数据分割成10个为一组，进行转换，由于 convertor.translate(arr, 1, 5, translateCallback); 这个转换函数是异步的，所以转换回来的坐标组的顺序是混乱的。可以根据循环时 i 来确定转换回来的坐标数组的顺序。

this.axiosPostRequst('接口',参数).then(res => {var map = new BMap.Map("iotmap");  // 创建地图实例 id="iotmap"map.addControl(new BMap.MapTypeControl());//显示地图，卫星，三维map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放          var opts = {    width : 200,     // 信息窗口宽度    height: 80,     // 信息窗口高度    title : "经纬度"  // 信息窗口标题   }   let ggPoint = {};   //修改后台传过来的数据格式let pointsArr = [];   //用来储存所有的坐标点for(var i = 0; i< res.list.length; i++){ggPoint = new BMap.Point( res.list[i].devLong, res.list[i].devLat );pointsArr.push(ggPoint);}        //1.坐标转换----start         var total = 0; //总记录数var groupCount = 0; //每次转十条var translateArr = []; //转换后的所有坐标集合 二维数组var newPoints = []; // 二维数组转换成一维数组--转换成功的最终结果if (pointsArr.length % 10 > 0) {groupCount = (pointsArr.length / 10) + 1;}else {groupCount = (pointsArr.length / 10);}if(res.list.length != 0){ //判断返回来的数组是否为空，若没有数据，则定位到上海复旦for(let i=0;i<groupCount;i++){ //外层循环，有多少组十条var pos = new Array();for(let j=0;j<10;j++){ //内层循环，每组十条if(total<pointsArr.length){ //不超过总记录数结束var point = new BMap.Point(pointsArr[(i * 10) + j].lng,pointsArr[(i * 10) + j].lat);pos.push(point);}total++;}var translateCallback = function (data) { translateArr[i] = data.points;  //根据对应的i，将数据放到translateArr中if(data.status === 0) {if(translateArr.length == parseInt(groupCount)){//将二维数组转换成一位数组newPoints = translateArr.reduce(function (a, b) { return a.concat(b)} );   //2.坐标全部转换完成后的操作----startif(newPoints.length == pointsArr.length){for(var x = 0; x < newPoints.length ; x++){//3.只给数组第一个和最后一个标注---startif(x == 0  || x == newPoints.length -1 ){var marker = new BMap.Marker(newPoints[x]) ;     // 创建标注    map.addOverlay(marker);                  // 将标注添加到地图中 map.centerAndZoom(newPoints[0], 15); // 初始化地图，设置中心点坐标和地图级别 //监听标注事件marker.addEventListener("click", function(e){    var infoWindow = new BMap.InfoWindow("经度："+e.target.point.lng+"<br/>纬度："+e.target.point.lat, opts);  // 创建信息窗口对象    map.openInfoWindow(infoWindow, e.target.point);      // 打开信息窗口 }); }//3.只给数组第一个和最后一个标注---end//4.出行路线规划---startvar walk = new BMap.WalkingRoute(map, { renderOptions: { map: map, autoViewport: false //控制缩放 } ,onPolylinesSet:function(routes) { var searchRoute = routes[0].getPolyline();//导航路线map.addOverlay(searchRoute); }, onMarkersSet:function(routes) {map.removeOverlay(routes[0].marker); //删除起点map.removeOverlay(routes[1].marker);//删除终点}});var start = newPoints[x];var end = newPoints[x+1];walk.search(start, end);//4.出行路线规划---end}}//2.坐标全部转换完成后的操作----end}}}var convertor = new BMap.Convertor();convertor.translate(pos, 1, 5, translateCallback);}} else {// 长度为0，即没有数据 让中心点定位在北京天安门var point = new BMap.Point(121.51296558787249, 31.293767902956343);    map.centerAndZoom(point, 15); var tianan = new BMap.Marker(point);        // 创建标注    map.addOverlay(tianan);                     // 将标注添加到地图中drawLab(point,"起点")}//1.坐标转换----end       }).catch(function (error) {console.log(error);});