百度地图API三：实时轨迹动态展现

上一个文章讲了如何根据标注点坐标范围计算显示缩放级别zoom自适应显示地图。

本文讲实时动态轨迹的实现。

先在上面画一些初始的标注点和轨迹线。然后再动态生成一些点。

然后我们随机生成新的轨迹点并显示轨迹到地图上。 因为是示例demo，所以用的随机生成。

真实案例中应该是用ajax从后台获取新的点数据过来。

随着轨迹的生长，地图会自己调整可视范围。调节中心点和地图级别。

我们要保存当前轨迹的最后一个点 为新增轨迹的起点。而保证轨迹的连续。

其实就是在百度地图上画标注点和线条。来呈现轨迹。 也可以在起点和终点用不同的标注点标记一下。

代码：

[javascript] view plain copy

print?

1. //数据准备,  
2. var points = [];//原始点信息数组  
3. var bPoints = [];//百度化坐标数组。用于更新显示范围。  
4.   
5. //地图操作开始  
6. var map = new BMap.Map("container");    
7.   
8. map.centerAndZoom(new BMap.Point(103.388611,35.563611), 5); //初始显示中国。  
9.   
10. map.enableScrollWheelZoom();//滚轮放大缩小  
11.   
12. setTimeout(dynamicLine, 1000);//动态生成新的点。  

addLine()代码：

[javascript] view plain copy

print?

1. //添加线  
2. function addLine(points){  
3.   
4.     var linePoints = [],pointsLen = points.length,i,polyline;  
5.     if(pointsLen == 0){  
6.         return;  
7.     }  
8.     // 创建标注对象并添加到地图     
9.     for(i = 0;i <pointsLen;i++){  
10.         linePoints.push(new BMap.Point(points[i].lng,points[i].lat));  
11.     }  
12.   
13.     polyline = new BMap.Polyline(linePoints, {strokeColor:"red", strokeWeight:2, strokeOpacity:0.5});   //创建折线  
14.     map.addOverlay(polyline);   //增加折线  
15. }  

随机生成新的轨迹点，动态添加到百度地图上。dynamicLine()    实际情况下这个函数应该是传参数。points。 这个points是一个数组。传参就可以直接添加新的轨迹到地图上。  绘制新的点并调节地图显示。

[javascript] view plain copy

print?

1. //随机生成新的点，加入到轨迹中。  
2. function dynamicLine(){  
3.     var lng = 100+getRandom(40);  
4.     var lat = 35+getRandom(30);  
5.     var id = getRandom(1000);  
6.     var point = {"lng":lng,"lat":lat,"status":1,"id":id}  
7.     var makerPoints = [];  
8.     var newLinePoints = [];  
9.     var len;  
10.   
11.     makerPoints.push(point);              
12.     addMarker(makerPoints);//增加对应该的轨迹点  
13.     points.push(point);  
14.     bPoints.push(new BMap.Point(lng,lat));  
15.     len = points.length;  
16.     newLinePoints = points.slice(len-2, len);//最后两个点用来画线。  
17.   
18.     addLine(newLinePoints);//增加轨迹线  
19.     setZoom(bPoints);  
20.     setTimeout(dynamicLine, 1000);  
21. }  

获取随机数：

[javascript] view plain copy

print?

1. // 获取随机数  
2. function getRandom(n){  
3.     return Math.floor(Math.random()*n+1)  
4. }  

移动地图中心点和显示级别：

[javascript] view plain copy

print?

1. //根据点信息实时更新地图显示范围，让轨迹完整显示。设置新的中心点和显示级别  
2. function setZoom(bPoints){  
3.     var view = map.getViewport(eval(bPoints));  
4.     var mapZoom = view.zoom;   
5.     var centerPoint = view.center;   
6.     map.centerAndZoom(centerPoint,mapZoom);  
7. }  

初始效果图：

过几秒之后的效果图：

模拟数据看起来不是很精彩啊。

github：https://github.com/liusaint/baiduMap

演示地址：http:///demos/baidumap/index.html?to=track

下一篇文章我们讲 百度地度轨迹回放功能。