百度地图批量转换 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.youkuaiyun.com/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.坐标转换-----start
	let 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.坐标全部转换完成后的操作----start
                   if(newPoints.length == pointsArr.length){
                     for(var x = 0; x < newPoints.length ; x++){
                       
                       //3.只给数组第一个和最后一个标注---start
                       if(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.出行路线规划---start
                       var 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);
       });

到这里就结束啦，希望能给遇到这些问题的小伙伴们一些帮助！