利用百度地图的路书功能实现汽车实时定位

最近公司做的一个app项目需要用到百度地图实时定位功能，app项目是用ionic做的，所以用的也是百度地图web版。具体需要实现的功能类似于导航的时候有个小车在地图上随着实时位置移动，本功能不需要导航，只需要小车在地图上移动。

那么具体怎么实现这个功能呢？首先看一下百度地图官方api，并没有现成的实时定位移动功能，只提供一个单点沿线运动的功能，尝试后发现该功能勉强用，但是还不够完美，最重要的是小车图标不能在路线的转弯处按照方向旋转车头，这样就显得很呆板也很假，后来又发现百度地图提供了一个路书功能，刚开始没留意这个功能是因为路书这个名字并没有使我联想到实时定位移动，看过demo才发现在没有更合适的选择的情况下，路书是最合适的选择，最重要的是车头能随着转弯旋转了。有了合适的组件，就剩下写代码了，下面是我实现的步骤。

首先说一下实现的思路，其实路书也是两点之间沿线运动功能，只不过做的比较完善，因为我要实时移动，也就是我开车从家到单位，在地图上表现出来的应该是随着我的车在动，地图上的小车图标也在动，不可能是我开到单位，然后再开始执行从家到单位的两点之间沿线运动功能，所以我要把从家到单位的这些坐标点实时收集起来，并且让路书不断的播放两点之间的沿线运动，这样看起来就是小车在地图上不停在动了，也就是从家到单位要经过A,B,C,D,E几个坐标点，路书先播放A到B的两点之间沿线运动，紧接着再播放B到C的两点之间沿线运动，依此类推，直到行程结束。不过这其中有个小问题是我一直没解决的，就是每次路书在执行完两点之间沿线运动的时候难免要停顿下来等待下一次的执行，所以这个功能并不像百度地图导航那样移动的这么平滑，而是隔几秒（多少秒自己设置）移动一次。

现在开始祭出代码，首先要把路书的源码下载下来，百度地图官方有下载，这里献上百度开源库地址：http://lbsyun.baidu.com/index.php?title=open/library，在里面找到路书即可查看源码。在源码中添加如下两个方法：

    /**
     * 小车继续行驶到下一个坐标点
     * @return 无返回值.
     */
    LuShu.prototype.goPath = function(path) {
        if (!path || path.length < 1) {
            return;
        }
        this._path=path;
        this.i=0;
        this._moveNext(this.i);
    }

    /**
     * 获取小车是否正在运行
     */
    LuShu.prototype.getMoving = function() {
        return this._moving;
    }

并改造_moveNext方法，代码如下：

/**
         * 移动到下一个点
         * @param {Number} index 当前点的索引.
         * @return 无返回值.
         */
        _moveNext: function(index) {
            var me = this;
            if (index < this._path.length - 1) {
                this._moving=true;
                me._move(me._path[index], me._path[index + 1], me._tween.linear);
            }else{
                this._moving=false;
            }
        }

_moving是判断路书是否在播放中。
收集坐标点的代码如下：

hjapp.subscription = this.geo.watchPosition({enableHighAccuracy: true,timeout:1000}).subscribe(position => {
            var convertor = new BMap.Convertor();
            var pointArr = [];
            pointArr.push(new BMap.Point(position.coords.longitude, position.coords.latitude));
            convertor.translate(pointArr, 1, 5, (data)=> {
                me.positions.push(new BMap.Point(data.points[0].lng, data.points[0].lat));
            });
        });

播放路书的代码如下：

move(){
        let me=this;
        hjapp.communityInterval=setInterval(()=> {
            if(this.startPosition==null){
                this.startPosition=0;
            }

            if(this.endPosition!=null){
                this.startPosition=this.endPosition;
            }
            this.endPosition=this.positions.length-1;
            let driving = new BMap.DrivingRoute(this.map);    //驾车实例
            if(this.positions[this.startPosition]!=null&&this.positions[this.endPosition]!=null){
                let distance=this.map.getDistance(this.positions[this.startPosition],this.positions[this.endPosition]);
                if(this.lushu==null||(distance>10&&!this.lushu.getMoving())){
                    driving.search(this.positions[this.startPosition], this.positions[this.endPosition]);
                    driving.setSearchCompleteCallback(function (results) {
                        //如果驾车距离过大，证明gps定位偏离，则不执行移动
                        if(results.getPlan(0).getDistance(false)<1500){
                            me.createLushu(driving);
                        }
                    });
                }
            }
        },5000);
}

createLushu(driving){
        let arrPois = [], plan = driving.getResults().getPlan(0);
        for (var j = 0; j < plan.getNumRoutes(); j++) {
            var route = plan.getRoute(j);
            arrPois = arrPois.concat(route.getPath());
        }
        this.map.setViewport(arrPois);
        if(this.lushu==null){
            this.lushu = new BMapLib.LuShu(this.map, arrPois, {
                defaultContent: "",
                autoView: true,//是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
                icon: new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/car.png', new BMap.Size(52, 26), {anchor: new BMap.Size(27, 13)}),
                speed: 1000,
                enableRotation: true,//是否设置marker随着道路的走向进行旋转
            });
            this.lushu.start();
        }else{
            this.lushu.goPath(arrPois);
        }
    }

以上代码都是用typescript语言编写，demo的下载地址是：http://download.csdn.net/download/leonmary/9854247