百度地圖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);
        }
    },
           

尚未完成，下次分享