百度地图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];//设置起始点为point
var 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("http://api.map.baidu.com/img/markers.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，代码看起来有些长，其实逻辑比较简单，希望读者有所收获~~