百度地图API实现轨迹动态移动

轨迹动态移动"/>

百度地图API实现轨迹动态移动

先看实现效果

1，先实例化百度地图，再在此实例上进行操作

 var map = new BMap.Map("allmap");map.centerAndZoom(new BMap.Point(116.404, 36.015), 6);map.enableScrollWheelZoom(true); //启动滚轮放大缩小map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件map.addControl(new BMap.ScaleControl()); // 添加比例尺控件map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件

2，实例化一个驾车对象DrivingRoute

 var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map,    autoViewport: true}});// map.clearOverlays()driving.search(p1, p2);//自动获得一个从p1到p2的驾车实例，一般有多个方案，默认选取第一个方案

3，为驾车实例设置回调函数

 driving.setSearchCompleteCallback(function(){// map.clearOverlays()var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); //通过驾车实例，获得一系列路径上所以点的组成的数组var paths = pts.length; //获得点的个数console.log(paths);var point = pts[0];//设置起始点为pointvar markers =  addMarker(point,index) //起始点上实例化一个标点var marks = addmarker(p2,start_name,end_name)//为终点添加信息框map.addOverlay(markers);

4，实现点和轨迹动画的关键。设置一个递归函数，i为轨迹中第i个点，在i与i+1之间添加线段，直到i等于终点，在整体上就相当于轨迹移动。

 var i=0;function dynamic(i){dynamicLine(pts[i].lng,pts[i].lat);//dynamicLine实现在i与i+1之间添加线段，下有参考代码if(i+10< paths){   //setTimeout(function(){i=i+10;//我这里是在i与i+10之间添加线段。markers.setPosition(pts[i]);   //特别注意一下迭代的顺序dynamic(i);},1);}}dynamic(i);

5，dynamicLine参考代码：

function dynamicLine(lng,lat){var lng =lng;  //100+getRandom(40);;var lat =lat;  //35+getRandom(30);var point = [lng,lat];var newLinePoints = [];var len;//addMarker(point);//增加对应该的轨迹点points.push(point);bPoints.push(new BMap.Point(lng,lat));len = points.length;newLinePoints = points.slice(len-2, len);//最后两个点用来画线。addLine(newLinePoints);//增加轨迹线//setZoom(bPoints);//setTimeout(dynamicLine, 1000);}function addLine(points){var linePoints = [],pointsLen = points.length,i,polyline;if(pointsLen == 0){return;}// 创建标注对象并添加到地图for(i = 0;i <pointsLen;i++){linePoints.push(new BMap.Point(points[i][0],points[i][1]));}var line = new BMap.Polyline(linePoints, {strokeColor:"red", strokeWeight:3, strokeOpacity:0.5}); //创建弧线对象map.addOverlay(line); //添加到地图中}

6，完整代码

function route(start,end,type,start_name,end_name){map.clearOverlays()var points = []//[[104.067588,30.58204],[116.412175,39.920125]];//原始点信息数组var bPoints = [];//百度化坐标数组。用于更新显示范                                                                     //当折线未加载完的时候，clear无法清除折线var p1 = start;var p2 =  end;//已经包装好的点index = -1;if (type=="自驾"||type=="乘车"){index=0;var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map,    autoViewport: true}});// map.clearOverlays()driving.search(p1, p2);//driving.enableAutoViewport()driving.setSearchCompleteCallback(function(){// map.clearOverlays()var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); //通过驾车实例，获得一系列点的数组var paths = pts.length; //获得有几个点console.log(paths);var point = pts[0];var markers =  addMarker(point,index)var marks = addmarker(p2,start_name,end_name)map.addOverlay(markers);var i=0;function dynamic(i){dynamicLine(pts[i].lng,pts[i].lat);if(i+10< paths){            //setTimeout(function(){i=i+10;markers.setPosition(pts[i]);   //特别注意一下迭代的顺序dynamic(i);},1);}}dynamic(i);})//driving回调函数结束}//if结束else if (type=="高铁"||type=="火车"){                      //无高铁，用火车代替index=1;var transit = new BMap.TransitRoute(map,{renderOptions: {map: map} ,onSearchComplete: function(result) {console.log("eee");if (transit.getStatus() == BMAP_STATUS_SUCCESS) {// 从结果对象中获取起点和终点信息// var plan = result.getPlan(0);// console.log(typeof(plan.getNumRoutes()));console.log("aaa");//plan.getNumRoutes()}}}
);
transit.search(p1,p2);
//transit.enableAutoViewport();
//成都104.067588,30.58204
//北京116.412175,39.920125
//郑州113.618085,34.758592
//重庆106.569621,29.573985
//上海121.48054,31.232965
//广州113.27875,23.137949
//var start= new BMap.Point(104.067588,39.58204);
//var end = new BMap.Point(116.412175,39.920125);
//transit.search(new BMap.Point(113.27875,23.137949), new BMap.Point(121.48054,31.232965));//console.log( transit.getStatus());
//var pt= transit.getResults().getPlan(0).getRoute(0).getPath();
// var phs = pt.length;
// console.log("aaaaaa");}else if (type=="飞机"){index=2;map.clearOverlays()var markers =  addMarker(end,index)map.addOverlay(markers);var points = [start,end];bPoints.push(start);bPoints.push(end);var curve = new BMapLib.CurveLine(points, {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5}); //创建弧线对象map.addOverlay(curve); //添加到地图中setZoom(bPoints);}else {index = 3;map.clearOverlays()var markers =  addMarker(end,index)map.addOverlay(markers);var points = [start,end];var line = new BMap.Polyline(points, {strokeColor:"yellow", strokeWeight:3, strokeOpacity:0.5}); //创建弧线对象map.addOverlay(line); //添加到地图中bPoints.push(start);bPoints.push(end);setZoom(bPoints);}//添加点function addMarker(point,index){var myIcon = new BMap.Icon(".png", new BMap.Size(23, 25), {offset: new BMap.Size(10, 25),imageOffset: new BMap.Size(0, 0 - index* 25)});var markers = new BMap.Marker(point, {icon: myIcon});return markers;}//添加线function addLine(points){var linePoints = [],pointsLen = points.length,i,polyline;if(pointsLen == 0){return;}// 创建标注对象并添加到地图for(i = 0;i <pointsLen;i++){linePoints.push(new BMap.Point(points[i][0],points[i][1]));}var line = new BMap.Polyline(linePoints, {strokeColor:"red", strokeWeight:3, strokeOpacity:0.5}); //创建弧线对象map.addOverlay(line); //添加到地图中}//添加动画function dynamicLine(lng,lat){var lng =lng;  //100+getRandom(40);;var lat =lat;  //35+getRandom(30);var point = [lng,lat];var newLinePoints = [];var len;//addMarker(point);//增加对应该的轨迹点points.push(point);bPoints.push(new BMap.Point(lng,lat));len = points.length;newLinePoints = points.slice(len-2, len);//最后两个点用来画线。addLine(newLinePoints);//增加轨迹线//setZoom(bPoints);//setTimeout(dynamicLine, 1000);}//设置随机数function getRandom(n){return Math.floor(Math.random()*n+1)}//设置视图等级function setZoom(bPoints){var view = map.getViewport(eval(bPoints));var mapZoom = view.zoom;var centerPoint = view.center;map.centerAndZoom(centerPoint,mapZoom);}}

7，代码看起来有些长，其实逻辑比较简单，希望读者有所收获~~