`
jjxliu306
  • 浏览: 157224 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

百度路书添加结束回调

    博客分类:
  • GIS
阅读更多

 

目前有个系统在使用百度地图,路书采用百度的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 置空



 

 

打包完整的示例在附件。

    

 

  • 大小: 212.1 KB
  • 大小: 169.3 KB
  • 大小: 242.7 KB
2
0
分享到:
评论

相关推荐

    百度路书添加回调方法后js

    百度地图添加路书后回调js,基于Lushu.js 修改,添加了回调方法。很多时候我们需要在路书跑完之后去执行一些相应的操作,如路书开始的时候我们把所有的路线绘制下来,跑完之后需要清理;路书结束后需要给用户提示等

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

    【标题】:“利用百度地图的路书功能实现汽车实时定位” 在现代的智能交通系统中,实时定位技术已经成为车辆管理、导航服务以及安全监控的重要组成部分。百度地图作为国内领先的在线地图服务提供商,提供了丰富的...

    百度地图API自定义点路书,路书点击事件,路书速度动态改变

    查了很多资料也看源码,总结了一下,动态改变标注的位置就类似于路书而且运动速度和轨迹可以随意控制,高速运动的标注也可以触发点击事件,添加多个互不影响其它标注和地图性能,可参考百度地图API 移动的marker,...

    Android集成百度语音合成Demo可运行

    当需要合成语音时,调用`startSpeaking()`方法,传入待合成的文本和回调接口: ```java mTts.startSpeaking("你好,世界", mTtsListener); ``` 这里的`mTtsListener`是一个实现了`OnSynthesizeListener`接口的对象...

    Android基于百度语音的语音交互

    综上所述,实现Android基于百度语音的语音交互涉及Android权限管理、SDK集成、初始化与回调监听、语音识别与合成的实现、网络和设备适配等多个方面。通过熟练掌握这些知识点,开发者可以构建出功能强大、用户体验...

    百度语音识别DEMO

    5. **回调机制**:当语音识别完成后,百度SDK会通过回调函数将识别结果传递给应用。开发者需要实现这些回调方法,如`onResult()`,来处理返回的文字结果。此外,可能还有错误处理回调如`onError()`,用于处理识别...

    百度语音合成______________

    这些事件包括合成开始、合成结束、错误等,开发者可以根据这些回调来控制应用的逻辑,比如显示进度或处理异常。 7. **优化用户体验**: 考虑到语音合成可能在无网络或者网络较差的环境中使用,建议提前缓存常用的...

    百度视频播放器demo

    8. **播放状态回调**:提供播放事件回调,如播放开始、暂停、结束等,便于开发者进行相关逻辑处理。 在【MyBaiduPlaydemo】中,我们可以看到以下关键部分: 1. **初始化播放器**:在应用启动或相关页面加载时,...

    android 百度地图滑动获屏幕中心坐标和显示当前地址信息

    最后,通过`OnGetGeoCodeResultListener`回调处理结果,将地址信息展示给用户。 需要注意的是,为了优化用户体验,避免频繁的网络请求,可以在地图静止一段时间后再发起反向地理编码请求,或者在用户停止滑动地图时...

    Android百度语音合成语音识别Demo

    在你的Activity或Service中,初始化TTS引擎,设置回调监听器,并申请权限: ```java BaiduTtsEngine.init(this, apiKey, secretKey); BaiduTtsEngine.setListener(new TtsEngineListener() { // 监听合成事件 ...

    android studio百度地图例子(大量注释哦)

    // 注册地图准备完成的回调 mMapView.setOnMapLoadedCallback(this); } @Override public void onMapLoaded() { // 地图加载完成后执行的操作,例如添加自定义图层、设置中心点等 } @Override protected ...

    百度语音SDK

    6. **处理回调**: 对SDK返回的结果进行处理,如播放语音、显示识别结果等。 ### 示例代码 在Android应用中,使用TTS的示例代码可能如下: ```java // 初始化TTS BaiduTts.init(this).setApiKey("your_api_key", ...

    JS调用百度语音识别接口.zip

    4. `onResult`: 处理服务器返回的语音识别结果,通常会包含一个回调函数来处理接收到的文字结果。 为了使用这些功能,你需要在你的HTML页面或者JavaScript代码中引入`api.js`,然后根据需求调用相应的函数。例如,...

    swift-BaiduLoading一款仿照百度加载的简洁动画

    除了核心的动画功能,"BaiduLoading"可能还包括一些辅助方法,比如在动画结束后触发回调,或者与其他UI元素(如UILabel)结合使用,显示加载进度的文字描述。 总的来说,"swift-BaiduLoading"是一个方便的Swift动画...

    android-----百度语音在线识别代码

    8. **处理回调**:在实现的`RecognizerListener`中,你需要处理各种回调,如识别结果、错误信息以及音量变化等。 在`VoiceDemo`这个项目中,你可以看到上述步骤的具体实现。`VoiceDemo`可能包含了如MainActivity....

    百度语音安卓手册

    这部分是手册的核心内容,详细介绍了语音识别控件的使用方法,包括创建对话框、设置参数列表、设置回调、启动识别等。还阐述了API方式的使用,如何实现识别监听器、获取BDVRClient单例对象、设置请求参数、开始语音...

    Cocos2d-x 游戏中嵌入广告(百度横幅) .

    - `Classes`中的源码可能已经包含了这个逻辑,包括调用百度广告的SDK方法,如`BaiduAdBanner::init()`,`BaiduAdBanner::loadAd()`,以及监听广告加载和展示的回调函数。 4. **广告显示**: - 横幅广告通常会出现...

    完成类似百度贴吧客户端tableview滑动效果

    在手势识别器的回调方法中,根据滑动的距离调整头部视图和卡片视图的位置。可以使用UIView的`animate(withDuration:animations:)`方法来执行平滑的动画。同时,确保在动画结束时更新相关视图的frame,以保持状态。 ...

Global site tag (gtag.js) - Google Analytics