百度路书添加结束回调

程序员文章站 2022-03-15 10:29:39

...

目前有个系统在使用百度地图，路书采用百度的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、页面打开后，点击 “路书” 按钮后，开始搜索路径，并执行路书。

百度路书添加结束回调

博客分类： GIS 百度地图百度路书路书gis
2、再次点击路书，因为页面把lushu 作为参数进行了判断，所以会提示 “路书正在执行...”