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