中铁建设集团招标网站,重庆建设集团网站首页,建立一个网站的步骤,官方静态网站模板百度地图的官方网址 官方批量转换的demo
花了几天时间了解了一下百度地图#xff0c;之前是后端的一个小伙伴在负责#xff0c;他跟我吐槽这是前端的东西#xff0c;让我来写#xff08;之前他们老大交给他了#xff0c;我也以为是后端的任务(๑′ᴗ‵๑)。。#xff09…百度地图的官方网址 官方批量转换的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); // 创建地图实例 idiotmapmap.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; itranslateArr.length; i){//连线----start 转换后相邻的两个点连线//if(itranslateArr.length-1){ // var polyline new BMap.Polyline([// new BMap.Point(translateArr[i].lng, translateArr[i].lat),// new BMap.Point(translateArr[i1].lng, translateArr[i1].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.lngbr/纬度e.point.lat, opts);map.openInfoWindow(infoWindow, e.target.point); // 打开信息窗口}); } }}}}setTimeout(function(){for(var i0; ipointsArr.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); // 创建地图实例 idiotmapmap.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 i0;igroupCount;i){ //外层循环有多少组十条var pos new Array();for(let j0;j10;j){ //内层循环每组十条if(totalpointsArr.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.lngbr/纬度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[x1];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);});到这里就结束啦希望能给遇到这些问题的小伙伴们一些帮助
