百度地图js 画运行轨迹之放大地图层级后自动刷新时仍保持最大层级状态（一）

做了一个vue的手机项目，有部分是关于研究百度地图的。需求是：

1.后台取数，前端根据数组坐标画运行轨迹。

2.前端需要让其运行轨迹自动刷新，频率是30s.（最好的方式实时展示到页面上。现在都是大数据的时代，在数据大的情况下，会出现卡死的情况，还需要在研究）

3.地图可以放到层级，但是在自动刷新时，又回到了一开始设置的那种级别，想要是在放大层级后，仍能保持当前状态。

4.所有的点要在可视范围内显示。下面就一一说明：

1.前端vue页面设置：

在data 中初始化一个对象：

changeBaidu:{
isZoomed:false,//默认没有进行zoom操作
currentZoom:17,//默认层级
},
在methods方法中ajax成功回掉中进行调用：

common.routeMap(that.mapInstane,that.middle,result,changeBaidu);

//行驶中的车每一分钟刷一次
if(that.carTripList && that.carTripList.length>0){//判断是否有轨迹
if(that.tripInfo.EndTime==""||that.tripInfo.EndTime==null){//判断是否结束
that.intervalid1 = that.intervalid1 || setInterval(function () {
that.mapInstane.removeOverlay(marker2);
that.initTrip(that.changeBaidu);
},30000);
}else {
if(that.intervalid1){
clearInterval(that.intervalid1);
}
}

2.百度JS调用：

routeMap:function (map,tracks,result,changeBaidu) {
// 百度地图API功能
var mapInit=map;
mapInit.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
// this.layoutMap(mapInit);
var that=this;
var runLine=tracks;

//第一次进来把起点标注给固定住，不让其清除掉
if(changeBaidu.isZoomed==false){
this.addMarker(this.translateBD(runLine[0].Latitude,runLine[0].Longitude),'起点',mapInit,runLine[0],result);
}
this.addMarker(this.translateBD(runLine[runLine.length-1].Latitude,runLine[runLine.length-1].Longitude),'终点',mapInit,runLine[runLine.length-1],result);
//判断默认进来没有进行缩放操作，不影响结束状态的展示
if(changeBaidu.isZoomed==false){
//计算当前位置中心原点
//设置地图中心点(已GPS数组中间的点为中心点)
var centre = runLine[parseInt(runLine.length/2)];

//缩放比例
var point1=this.translateBD(runLine[0].Latitude,runLine[0].Longitude);//起点
var point2=this.translateBD(centre.Latitude,centre.Longitude);//new BMap.Point(centre.Longitude, centre.Latitude);//中点
var point3=this.translateBD(runLine[runLine.length-1].Latitude,runLine[runLine.length-1].Longitude);//终点

var points = [point1, point2,point3];

var view = mapInit.getViewport(eval(points)); var mapZoom = view.zoom; var centerPoint = view.center; mapInit.centerAndZoom(centerPoint,mapZoom-1); changeBaidu.isZoomed=true; }else { mapInit.centerAndZoom(this.translateBD(runLine[runLine.length-1].Latitude,runLine[runLine.length-1].Longitude),mapInit.getZoom()); } this.storkeLine(mapInit,tracks); },

地图添加起止点图标：

addMarker: function (point, name,mapInit,trackUnit,result) {
if(name=="起点"){
var myIcon = new BMap.Icon("asserts/img/static/startMap.svg", new BMap.Size(45,45),{
anchor: new BMap.Size(20, 45)//这句表示图片相对于所加的点的位置mapStart

});
var marker = new BMap.Marker(point,{icon:myIcon});  // 创建标注
mapInit.addOverlay(marker);               // 将标注添加到地图中
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
this.setInfoBox(trackUnit,marker);
}else if(name=="终点"){
//判断是否为结束行程，结束显示终点，没结束显示小车
if(result.EndTime==""||result.EndTime==null){

var myIcon2 = new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/car.png', new BMap.Size(52,26),
{anchor : new BMap.Size(27, 13)});
}else {
var myIcon2 = new BMap.Icon("asserts/img/static/endMap.svg", new BMap.Size(45,45),{
anchor: new BMap.Size(20, 45)//这句表示图片相对于所加的点的位置mapEnd 40,45
});
}

window.marker2 = new BMap.Marker(point,{icon:myIcon2});  // 创建标注

marker2.setRotation(90);//trackUnit.route
mapInit.addOverlay(marker2);               // 将标注添加到地图中
// map.removeOverlay(marker);
marker2.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
//添加mark位置的信息提示
this.setInfoBox(trackUnit,marker2);
}
},

尚未完成，下次分享