百度地图从后台获取实时坐标点以实现车辆实时跟踪

要想实现车辆实时跟踪，就必须实时获取车辆的坐标点，然后展示在百度地图上。而实现实时获取车辆坐标点的功能，有两个方案：方案①定义一个函数getCars()，此函数的功能是通过ajax访问后台接口，从而返回车辆的实时位置信息。然后利用setInterval() 方法，每隔2000毫秒（根据业务需求确定）就调用一次获取车辆实时位置信息的函数； 方案②：定义一个获取车辆实时位置信息的函数getCars()，并在此函数中使用setTimeout() 方法在2000毫秒后重新调用上面的函数getCars()。

方案确定好后，怎样具体实现跟踪功能呢，且跟踪时需要将车辆在跟踪期间走过的路径绘制出来。

首先，在实现跟踪之前，应该先把所有车辆当前的位置信息定位在百度地图上，且每个车辆对应百度地图中的一个marker，然后给每个车辆的marker添加一个鼠标滑过打开信息窗口的功能。被打开的信息窗口中有一个“跟踪”按钮，当用户点击“跟踪”按钮时，就每隔2000毫秒调用已经定义好的获取车辆实时位置信息的函数getCars()。在getCars()函数中，首先通过ajax调用后台接口，以从后台获取到车辆的实时位置信息；然后将此实时位置信息push到一个全局数组trackMap中，此数组存放被跟踪车辆所走过的轨迹坐标点；随后，利用Polyline将trackMap中最新的两个坐标点用线段连接起来，再利用addOverlay将此线段添加到百度地图中，以作为被跟踪车辆所走过的历史轨迹路线；最后，利用marker的setPosition()方法，将代表被跟踪车辆的marker移动到最新的位置trackMap[trackMap.length - 1]处，即可。至此，就实现了车辆的实时跟踪。

var trackMap = [];

function getCars(){map.panTo(trackMap[trackMap.length - 1]);//将地图的中心点更改为给定的点。map.setZoom(14);//将视图切换到指定的缩放等级，中心点坐标不变。$.ajax({async:false,cache:true,url: "获取车辆实时位置信息的接口",type: 'GET',dataType:'text',success: function(result){var result = eval('('+ result +')');/*** 实时获取经纬度信息 ***/sitsLongitude = result.lontitude;sitsLatitude = result.latitude;trackMap.push(new BMap.Point(sitsLongitude, sitsLatitude));//push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。carContent = '<div><br/>经度：'+sitsLongitude+'<br/>纬度：'+sitsLatitude+'<p style="color:green; margin-left:65%;">正在跟踪中</p></div>';//addOverlay(overlay: Overlay) : 将覆盖物添加到地图中，一个覆盖物实例只能向地图中添加一次//Polyline(points: Array<Point>, opts: PolylineOptions) : 创建折线覆盖物对象//PolylineOptions: 此类表示Polyline构造函数的可选参数。 if (trackMap.length > 2) {map.addOverlay(new BMap.Polyline([trackMap[trackMap.length-2], trackMap[trackMap.length - 1]], {strokeColor: "blue", strokeWeight: 3, strokeOpacity: 1, strokeStyle:"dashed"}));}addMouseoverHandler(carContent, carMarker);carMarker.setPosition(trackMap[trackMap.length-1]);//setPosition:设置标注的地理坐标},error:function(e){alert("获取物资信息失败");}});setTimeout(function(){//setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。getCars();}, 2000);}

需要注意的是：

1. 在使用setPosition()方法设置被跟踪车辆的最新位置时，应在跟踪之前，就将代表车辆的marker添加至地图中，不然setPosition()不会起作用的。具体将车辆marker添加到地图中的操作，即是跟踪之前的定位操作，参考我之前的一篇文章：从后台获取位置信息并定位在百度地图上。

2. 为marker添加鼠标滑过事件addMouseoverHandler()，也参考定位的那篇文章。只是在跟踪时，需要将最新的经纬度信息重新获取后再展示即可。