在原有的百度路书的基础上,做了修改,使其能实现边走边画线的需求.
源代码如下,其中您的密钥要换成自己的,如果不换,则需要粘贴到百度API示例里面的GPS路书的编辑器中才能运行
轨迹回放(路书) body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}#map_canvas{width:100%;height:500px;}#result {width:100%} 开始 停止 暂停 隐藏信息窗口 展示信息窗口 var marker;var map = new BMap.Map('map_canvas');map.enableScrollWheelZoom();map.centerAndZoom();var lushu;// 实例化一个驾车导航用来生成路线 // var drv = new BMap.DrivingRoute('北京', {// onSearchComplete: function(res) {//if (drv.getStatus() == BMAP_STATUS_SUCCESS) { // var plan = res.getPlan(0);// var arrPois =[];//for(var j=0;j= count) {clearInterval(me._intervalFlag);//移动的点已经超过总的长度if(me.i > me._path.length){return;}//运行下一个点me._moveNext(++me.i);}else {currentCount++;var x = effect(init_pos.x, target_pos.x, currentCount, count),y = effect(init_pos.y, target_pos.y, currentCount, count),pos = me._projection.pointToLngLat(new BMap.Pixel(x, y));//设置markerif(currentCount == 1){var proPos = null;if(me.i - 1 >= 0){proPos = me._path[me.i - 1];}if(me._opts.enableRotation == true){ me.setRotation(proPos,initPos,targetPos);}if(me._opts.autoView){if(!me._map.getBounds().containsPoint(pos)){me._map.setCenter(pos);}}}//正在移动me._marker.setPosition(pos);//设置自定义overlay的位置me._setInfoWin(pos);}},timer);};lushu = new BMapLib.LuShu(map,arrPois,{defaultContent:"粤A30780",//"从天安门到百度大厦"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: 4500,enableRotation:true,//是否设置marker随着道路的走向进行旋转landmarkPois:[{lng:116.306954,lat:40.05718,html:'加油站',pauseTime:2} ]}); marker.addEventListener("click",function(){ marker.enableMassClear();//设置后可以隐藏改点的覆盖物 marker.hide(); lushu.start();//map.clearOverlays();//清除所有覆盖物 });//}//} // });//drv.search('天安门', '百度大厦'); // lushu.start(); // lushu.pause();//绑定事件$("run").onclick = function(){ marker.enableMassClear();//设置后可以隐藏改点的覆盖物 marker.hide(); lushu.start(); // map.clearOverlays();//清除所有覆盖物}$("stop").onclick = function(){lushu.stop();}$("pause").onclick = function(){lushu.pause();}$("hide").onclick = function(){lushu.hideInfoWindow();}$("show").onclick = function(){lushu.showInfoWindow();}function $(element){return document.getElementById(element);}其中,arrPois的点是自定义点,非常适合做轨迹回放用.
注意:landmarkPois 必须要定义,如果没有要显示的点话,就写成[],不能为空,否则会无法运行.
实现边走边画线,首先将百度路书中的画线代码注释掉,然后重写_move方法,参见代码中的重写_move方法.基于此可以实现更加复杂的各种附加信息.
其效果如下图:
也算是给后人留点启发吧