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

最近公司做的一个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

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

【百度地图】路书轨迹显示
[百度地图]路书轨迹显示通过后端返回的坐标点列表,然后在地图上展示出轨迹,并且显示标点和显示窗口文案.效果如下引入百度地图,因为百度地图的轨迹(路书)模式只能是3.0才可以使用,所以注意自己引入的 ...
高德地图：实现3D模型轨迹回放效果（类似百度地图汽车模型路书）
需求描述需使用高德地图实现类似百度地图汽车模型路书的效果,即: ①在地图上添加一个沿着路径移动,且角度与路径一致的3D模型: ②3D模型移动过的路径用不同颜色显示出来: 在高德地图在线示例中实现的效 ...
android 支付宝地图,利用百度地图实现支付宝“到位”功能（地图模式）
Hello,大家好,郭老司机又来话痨啦((/- -)/.作为一个芝麻信用分762的穷苦青年,本想着,终于可以在支付宝上,光明正大的勾搭坦诚相见的妹子们,谁知道被和谐了,互联网套路啊(ノಠ益ಠ)ノ彡┻━ ...
百度地图api 自定义驾车线路规划车辆实时定位
项目需求根据百度api给出的接口实现从始发地→目的地线路规划以及车辆的实时位置跟踪定位 1.首先引入百度API <script type="text/javascript& ...
百度地图api周边搜索功能
利用百度地图api周边搜索功能,实现点击切换周边类型显示 <!DOCTYPE html> <html lang="zh-CN"> <head>& ...
android开发百度地图坐标偏差,利用百度地图Android sdk高仿微信发送位置功能及遇到的问题...
接触了百度地图开发平台半个月了,这2天试着模仿了微信给好友发送位置功能,对百度地图的操作能力又上了一个台阶我在实现这个功能的时候,遇到一些困难,可能也是别人将会遇到的困难,特在此列出 1.在微信发送 ...
百度路书信息显示_学会用地图制作路书，分分钟从小白变成自驾游达人
原创文章,欢迎点评! 很多想要开车自驾游的朋友,由于自己不会做行程规划和安排,或总是感觉自己做的行程规划.安排不是很精准,不能很清晰的规划出自己每天该走多远的路?途中在景点游玩的时间应该是多少?什么时 ...
利用百度地图API进行车辆查询并用鼠标拾点获取经纬度
利用百度地图API查询公交车线路位置信息以及鼠标取点的经纬度先从官网申请秘钥http://lbsyun.baidu.com/ 2. 如果是用jsp写动态web项目,在jsp页面中引入js库,并且引入 ...
每日新闻丨百度地图发布语音定制功能；Windows 10高CPU使用率问题已解
更多精彩,请点击上方蓝字关注我们! 每日新闻播报第09-23期 1 趋势洞察杨元庆:制造大国变为制造强国需重视三个转变近日,联想集团董事长兼CEO杨元庆在2019世界制造业大会上表示,要实现 ...

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

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

最新文章

热门文章