百度地圖的官方網址
官方批量轉換的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);});

到這里就結束啦，希望能給遇到這些問題的小伙伴們一些幫助！

總結

以上是生活随笔為你收集整理的百度地图批量转换 GPS坐标转百度地图坐标 问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。