独角兽企业重金招聘Python工程师标准>>>
在上一篇博客中做的GPS坐标转换成百度地图坐标的功能中，在实际工作中发现了一个问题，就是画出来的行车轨迹会有很多的漂移和往复，经过分析，是由于BMap.Convertor.translate()方法调用的时候，是通过异步的方法调用的，所以导致转换后的数据随机排列，并且还会出现掉数据点的情况，现在来修改一下。
出现数据随机排列的原因是我在取出数据来转换的时候是用for循环来的，如何想解决这个问题，循环结构肯定是不能用的，用就一定会出现上述的问题，只能通过全局变量来实现。
定义两个全局变量：
//______________________________这是地图中其他的变量varModels="${PathHistory}";//获取后台行车轨迹的数据varCoordinatesArr=Models.split("/");//分割数据varmap=newBMap.Map("container");//创建地图实例116.399,39.910varpArr=[];//装转换过后的数组varcenterPoint=null;//地图中心坐标varmarkerhead=null;//全局的标注//______________________________这是地图中其他的变量varal=CoordinatesArr.length-1;//数据的长度varnow=0;//计数变量
在函数中取出数据转换：
//转换数据函数functionmakeLine(){varCoordinates=CoordinatesArr[now].split(",");BMap.Convertor.translate(newBMap.Point(Coordinates[0],Coordinates[1]),0,translateCallback);now++;}
转换之后调用回调函数：
//坐标转换完之后的回调函数functiontranslateCallback(point){pArr.push(point);setTimeout("makepoly()",250);//调用画轨迹的函数}
然后再调用画行车轨迹的函数：
//在地图上画行车轨迹的函数functionmakepoly(){//删除之前添加的标注map.removeOverlay(markerhead);centerPoint=newBMap.Point(pArr[now-1].lng,pArr[now-1].lat);//创建点坐标map.centerAndZoom(centerPoint,18);//初始化地图，设置中心点坐标和地图级别map.addControl(newBMap.MapTypeControl());map.enableScrollWheelZoom();varpolyline=newBMap.Polyline(pArr,{strokeColor:"red",strokeWeight:3,strokeOpacity:0.5});//颜色、宽度为3map.addOverlay(polyline);//将路线添加到地图上//添加标注画意摄影主义markerhead=newBMap.Marker(centerPoint);//在起点创建标注map.addOverlay(markerhead);//将标注添加到地图中//判断计数变量是否比数据长度小，是就继续转换if(now<al){makeLine();}}
这其中非常重要的就是后面的判断：
//判断计数变量是否比数据长度小，是就继续转换if(now<al){makeLine();}
如果还没有转换完成就继续转换，这样形成一个循环，才能把数据全部转换完整。
下面贴出完整的页面：
<%@pagelanguage="java"import="java.util.*"pageEncoding="utf-8"%><%Stringpath=request.getContextPath();StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><%@taglibprefix="s"uri="/struts-tags"%><!DOCTYPE><htmlxmlns="/1999/xhtml"><head><metacontent="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0;"name="viewport"/><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><s:iteratorid="map"value="PathHistoryCoordinates"var="map"status="index"></s:iterator><title>行车轨迹</title><styletype="text/css">#container{height:100%;width:100%;}</style><scripttype="text/javascript"src="http://api./api?v=1.5&ak=F23c57cf276323e3f60ab6bb90af4767"></script><scripttype="text/javascript"src="/map/jsdemo/demo/convertor.js"></script></head><bodystyle='padding:0;margin:0;'><!--地图图层--><divid="container"></div><scripttype="text/javascript">varModels="${PathHistory}";//获取后台行车轨迹的数据varCoordinatesArr=Models.split("/");//分割数据varmap=newBMap.Map("container");//创建地图实例116.399,39.910varpArr=[];//装转换过后的数组varcenterPoint=null;//地图中心坐标varmarkerhead=null;//全局的标注varal=CoordinatesArr.length-1;//数据的长度varnow=0;//计数变量varpointhead=CoordinatesArr[0].split(",");//判断！如果云端没有数据，则提示用户，并将坐标定位到北京if(pointhead[0]&&pointhead[1]){makeLine();}else{varcenterPoint=newBMap.Point(108.27589,22.810024);//创建点坐标南宁108.27589,22.810024//alert("云端没有数据！");if(Models=="设备没有绑定车辆！"){alert("设备没有绑定车辆！");}else{alert("云端没有数据！");}}//转换数据函数functionmakeLine(){varCoordinates=CoordinatesArr[now].split(",");//p.push(newBMap.Point(Coordinates[0],Coordinates[1]));BMap.Convertor.translate(newBMap.Point(Coordinates[0],Coordinates[1]),0,translateCallback);now++;}//坐标转换完之后的回调函数functiontranslateCallback(point){//alert(point.lng+","+point.lat);pArr.push(point);setTimeout("makepoly()",250);//调用画轨迹的函数}//在地图上画行车轨迹的函数functionmakepoly(){//删除之前添加的标注map.removeOverlay(markerhead);centerPoint=newBMap.Point(pArr[now-1].lng,pArr[now-1].lat);//创建点坐标map.centerAndZoom(centerPoint,18);//初始化地图，设置中心点坐标和地图级别map.addControl(newBMap.MapTypeControl());map.enableScrollWheelZoom();varpolyline=newBMap.Polyline(pArr,{strokeColor:"red",strokeWeight:3,strokeOpacity:0.5});//颜色、宽度为3map.addOverlay(polyline);//将路线添加到地图上//添加标注画意摄影主义markerhead=newBMap.Marker(centerPoint);//在起点创建标注map.addOverlay(markerhead);//将标注添加到地图中//判断计数变量是否比数据长度小，是就继续转换if(now<al){makeLine();}}</script><divid="testdiv"></div></body></html>
