百度地图js 画运行轨迹之运行轨迹取增量数组坐标值画线（二）

自动刷新的时候每次要是调用后台全部的数组值，性能会比较的稍低些。进行优化，就是将每次自动刷新的时候，第二次获得的数值坐标值减去第一次的数组坐标值的差值数值，将这些值画线，会提高性能。

1.前端vue页面设置：

在methods方法中ajax成功回掉中进行调用：

if(that.oldTracks ){
                                that.middle= result.Tracks.slice(that.oldTracks.length-1);

                            }else{
                                that.middle=result.Tracks;
                            }
                            that.oldTracks =result.Tracks;

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

还有一点就是需要在刷新的时候不要清除全部的线在重新画，需要画增量线，先将上一个最后的车图标清除

that.mapInstane.removeOverlay(marker2);

然后将车的位置移到这次的最后一点中。

2 .百度JS调用：

/*GPS转百度坐标*/
translateBD:function(Latitude,Longitude){
    var arr1 = GPS.gcj_encrypt(Number(Latitude), Number(Longitude));
    var arr2 = GPS.bd_encrypt(arr1['lat'], arr1['lon']);
    var point = new BMap.Point(arr2['lon'], arr2['lat']);
    return point;
},

画线：

//画线
    storkeLine:function (mapInit,tracks) {
        var arrPois = [];
        var lineColor="";
        //将后台读取到的GPS点信息，全部存储为百度的BMap.Point坐标点对象并用数组装起来
        //循环遍历数组
        for(var i=0;i30&&tracks[i].Speed<60){
                lineColor="#b0e758";
            }else if(tracks[i].Speed>60&&tracks[i].Speed<90){
                lineColor="#37d49a";
            }else if(tracks[i].Speed>90&&tracks[i].Speed<120){
                lineColor="#0c9be4";
            }else if(tracks[i].Speed>120){
                lineColor="#960100";
            }
            //创建线路
            window.polyline = new BMap.Polyline(
                arrPois,//所有的GPS坐标点
                {
                    strokeColor : lineColor, //线路颜色
                    strokeWeight : 7,//线路大小7
                    strokeOpacity:1
                    //线路类型(虚线)
//                                strokeStyle : "dashed"
                });
            //绘制线路
            mapInit.addOverlay(polyline);
        }
    },