目前有个系统在使用百度地图,路书采用百度的LuShu.js ,连接在: 百度路书
很多时候我们需要在路书跑完之后去执行一些相应的操作,譬如路书开始的时候我们把所有的路线绘制下来,跑完之后需要清理;路书结束后需要给用户提示;路书结束后需要执行其它操作等等、、、、
以下是基于LuShu.js 的一点小改动( 由于iteye在代码中不能标红,完整修改过的LuShu.js 可以参考附件):
/** * @description 开始运动 * @param none * @return 无返回值. * * @example <b>参考示例:</b><br /> * lushu.start(); */ LuShu.prototype.start = function(_end_callback) { var me = this, len = me._path.length; //########################### 代码不能标红,此标记显示下方是自己添加的################################ //自定义添加 当结束的时候判断回调函数 --lyf if(this.end_callback) { //当前路书未结束,新的直接返回 console.log("当前路书没有跑完,等跑完后在start"); return ; } if(_end_callback) { //路书跑完结束回调 this.end_callback = _end_callback ; } //########################### 代码不能标红,此标记显示上方是自己添加的################################ //不是第一次点击开始,并且小车还没到达终点 if (me.i && me.i < len - 1) { //没按pause再按start不做处理 if (!me._fromPause) { return; }else if(!me._fromStop){ //按了pause按钮,并且再按start,直接移动到下一点 //并且此过程中,没有按stop按钮 //防止先stop,再pause,然后连续不停的start的异常 me._moveNext(++me.i); } }else { //第一次点击开始,或者点了stop之后点开始 me._addMarker(); //等待marker动画完毕再加载infowindow me._timeoutFlag = setTimeout(function() { me._addInfoWin(); if(me._opts.defaultContent == ""){ me.hideInfoWindow(); } me._moveNext(me.i); },400); } //重置状态 this._fromPause = false; this._fromStop = false; }, /** * 移动到下一个点 * @param {Number} index 当前点的索引. * @return 无返回值. */ _moveNext: function(index) { var me = this; if (index < this._path.length - 1) { me._move(me._path[index], me._path[index + 1], me._tween.linear); } else { //########################### 代码不能标红,此标记显示下方是自己添加的################################ if( this.end_callback){ this.end_callback(); this.end_callback = null; if(this._marker) this._map.removeOverlay(this._marker); } //########################### 代码不能标红,此标记显示上方是自己添加的################################ } },
其中红色部分是自己添加的内容,第一部分在start中的启动的时候传递一个回调函数进来,并且每次判断回调是否已经存在,如果存在说明当前路书未结束;第二部分就是路书跑完后执行回调函数、清理掉当前路书的marker;大家可以基于此自己再行扩展。
调用示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>路书回调测试</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=39b5eb8bb91adccfa6487135d960a1e8"></script>
<script type="text/javascript" src="LuShu.js"></script>
<style type="text/css">
html{
height: 100%;
width: 100%;
overflow: hidden;
}
body {
margin:0px;
padding:0px;
border:0px;
}
.container {
margin:0px;
padding:0px;
width:100%;
height:100%;
position:absolute;
}
.map {
width:100%;
height:100%;
background:#d5e6f5;
position:absolute;
float:left;
}
.add_btn {
text-align:center;
position:absolute;
bottom: 5px;
left: 350px;
z-index: 11;
}
</style>
</head>
<body>
<div class="container">
<div id="map" class="map">
</div>
<div class="add_btn">
<input type="button" title="" value="路书" onclick="lushu_run()">
</div>
</div>
<script type="text/javascript">
var map ;
var lushu;
window.onload = function() {
map = new BMap.Map('map'); // 创建Map实例
var point = new BMap.Point(116.404, 39.915);//, 11
map.centerAndZoom(point, 11);
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
}
function lushu_run() {
if (lushu) {
alert("请等待当前路书跑完.");
return;
}
var myIcon = new BMap.Icon(
"http://sandbox.runjs.cn/uploads/rs/101/wmbvrxnx/kache.png",
new BMap.Size(37, 25), {
imageOffset : new BMap.Size(0, 0)
});//卡车
var driving = new BMap.DrivingRoute(map); //驾车实例
//路径搜索后开始路书回放路径
driving.setSearchCompleteCallback(function(res) {
var arrPois = res.getPlan(0).getRoute(0).getPath();
//基于返回的路径规划画出来路径
var polyline = new BMap.Polyline(arrPois, {
strokeColor : '#111'
})
map.addOverlay(polyline);
//地图视野设置到当前的路径
map.setViewport(arrPois);
lushu = new BMapLib.LuShu(map, arrPois, {
defaultContent : "",//
autoView : true,//是否开启自动视野调整,如果开启那么路书在运动过程中会根据视野自动调整
icon : myIcon,
speed : 500, //速度设置
enableRotation : true,//是否设置marker随着道路的走向进行旋转
landmarkPois : []
});
//路书启动,参数为一个函数
lushu.start(function() {
console.log("路书结束的回调开始调用了");
lushu = null; //当前路书置空
map.removeOverlay(polyline); //清理掉路书回放中提前画的路径
});
});
var start = new BMap.Point(116.406, 39.925);//, 11
var end = new BMap.Point(116.402, 39.923);//, 11
driving.search(start, end);
}
</script>
</body>
</html>
1、页面打开后,点击 “路书” 按钮后,开始搜索路径,并执行路书。
2、再次点击路书,因为页面把lushu 作为参数进行了判断,所以会提示 “路书正在执行...”
3、路书结束后清理路径 polyline , 并执行了回调函数,将lushu 置空
打包完整的示例在附件。
相关推荐
百度地图添加路书后回调js,基于Lushu.js 修改,添加了回调方法。很多时候我们需要在路书跑完之后去执行一些相应的操作,如路书开始的时候我们把所有的路线绘制下来,跑完之后需要清理;路书结束后需要给用户提示等
查了很多资料也看源码,总结了一下,动态改变标注的位置就类似于路书而且运动速度和轨迹可以随意控制,高速运动的标注也可以触发点击事件,添加多个互不影响其它标注和地图性能,可参考百度地图API 移动的marker,...
错误修正: 全部轴回机械原点时(主要是X、Y轴联合回参考点时),如果Y轴未到而X轴先到,则X轴不停 V5.4.24 提高了Win2000, WinXP下的兼容性,通过了兼容性测试 修正了解析PLT文件时遇到AA指令时无法正确使用高级...
18. 各种内核回调的查看和卸载 19. 多国语言版本的对应(中文和英文) 20. 暂停进程运行和恢复进程运行 21. 进程模块的内存的dump 22. 进程的线程的查看和结束 23. 进程的窗口的查看和控制 24. 进程的定时器的查看和...
第五步:在MyCustomUI.xlsm中,按Alt+F11组合键打开VBE,并插入一个标准模块,添加下面的代码供回调使用 Sub 完美(control As IRibbonControl) ActiveWorkbook.FollowHyperlink _ Address:=...
3、新增“类回调_取类地址”类回调(带实例)源码来自东灿的ECallBack。 4、新增“类回调_释放回调”释放回调子程序地址。 5、新增“系统_调用帮助”调用系统帮助文档。 精易模块 V3.81 what’s new:(20140811) 1...
3.3.2.页面回退管理的实现 22 3.4本章小结 22 第四章 页面自适应机制设计 23 4.1页面兼容策略 23 4.2 页面自适应策略 24 4.2.1设备自适应 24 4.2.2.浏览器自适应 25 4.3 模块实现 25 4.3.1根据适口属性设计响应式...
回调函数.ec 图形窗口模块.ec 图片演示-西风.EC 图片演示.EC 图片组操作类.ec 圆角 化.ec 圆角化加强.ec 圆角化窗口.ec 在任务栏显示或隐藏.ec 在线更新.ec 在线更新2.ec 在 线查找歌词.ec 地理位置查询.ec 堕之星辰...
回调函数.ec 图形窗口模块.ec 图片演示-西风.EC 图片演示.EC 图片组操作类.ec 圆角 化.ec 圆角化加强.ec 圆角化窗口.ec 在任务栏显示或隐藏.ec 在线更新.ec 在线更新2.ec 在 线查找歌词.ec 地理位置查询.ec 堕之星辰...
回调函数.ec 图形窗口模块.ec 图片演示-西风.EC 图片演示.EC 图片组操作类.ec 在线更新.ec 在线更新2.ec 在线查找歌词.ec 地理位置查询.ec 堕之星辰1.2.ec 填充树型框.ec 复制目录模块.ec 外挂作坊1.4....
回调函数1.0(1.0).zip 好用的东西(1.0).zip 好色按钮(1.0).zip 好色按钮 2.0(2.0).zip 彗星模块(1.3).zip 汉字查询3.1版(1.0).zip 汉字助记码(1.0).zip 汉字处理模块(1.0).zip 汉语朗读模块(1.0).zip 混合运算 1.0...
回调函数1.0(1.0).zip 好用的东西(1.0).zip 好色按钮(1.0).zip 好色按钮 2.0(2.0).zip 彗星模块(1.3).zip 汉字查询3.1版(1.0).zip 汉字助记码(1.0).zip 汉字处理模块(1.0).zip 汉语朗读模块(1.0).zip 混合...
易语言~模块~批量~下载 2008-11-08 14:41 文件夹 文件夹 易语言模块大全 2005-10-21 15:30 14489 3100 易语言模块大全\24位转单色位图模块.ec 2007-01-18 07:00 7110 2339 易语言模块大全\69msn.ec ...
易语言~模块~批量~下载 2008-11-08 14:41 文件夹 文件夹 易语言模块大全 2005-10-21 15:30 14489 3100 易语言模块大全\24位转单色位图模块.ec 2007-01-18 07:00 7110 2339 易语言模块大全\69msn.ec ...
。 2008-11-08 14:41 文件夹 文件夹 易语言模块大全 2005-10-21 15:30 14489 3100 易语言模块大全\24位转单色位图模块.ec 2007-01-18 07:00 7110 2339 易语言模块大全\69msn.ec 2005-05-26 02:18 4070 1472 ...