百度地图驾车路线渲染后的回调driving.setSearchCompleteCallback的使用

实现的功能
渲染多条驾车路线(道路规划),并在路线渲染后的回调函数中实现添加拥堵路段;
使用的知识
1.var bm = new BMap.Map(“allmap”);
2.new BMap.DrivingRoute(bm,{renderOptions:{map:bm,autoViewport:true}});
3.driving.search(起始点,终点,{途径点:[p3,p4]})
4.driving.setSearchCompleteCallback(function(){} )//绘制完成之后的回调
5.new BMap.Polyline([new Point…,new Point],{线的属性设置});

		getPoint:function(lat,lng){
			var self = this;
			$.ajax({
                url: ctx+"/service/rescue/queryMapLatAndLng",
                success: function (res) {
                	if( res.data ){
                		var resData = res.data;
                		var routesAllArr = [];
                		for( j in resData ){
                			(function(i){
	                			var driving = new BMap.DrivingRoute(bm, {renderOptions:{map: bm, autoViewport: false},onMarkersSet:function(res){
	                				bm.removeOverlay(res[0].marker); //删除原起点
	                				bm.removeOverlay(res[res.length-1].marker);//删除原终点
	                				//起点
	                				var newPoint = new BMap.Point(resData[i].lng,resData[i].lat);
	                				bm.addOverlay(new BMap.Marker(newPoint,{icon:new BMap.Icon(ctx+"/images/marker-jiuyuan.gif",new BMap.Size(30,48),{imageSize: new BMap.Size(30,48)})}));
	                				//添加文字标签label覆盖物
	                				var optNum = {
                					    position : newPoint,
                					    offset : new BMap.Size(-55,-56)
                					};
                					var label = new BMap.Label(resData[i].rescue_station, optNum);
                					label.setStyle({
                						width:'100px',
                						color:'#fff',
                						textAlign:'center',
                					    height : "24px",
                					    lineHeight : "24px",
                						border:'none',
                						background:"rgba(201,122,20,.5)",
                						padding:"0",
                						borderRadius:"6px",
                						fontSize:"12px",
                						border:"1px rgb(201,122,20) solid"
                					});
                					bm.addOverlay(label);
	                			}});
	                			//画道路
	                			driving.search(new BMap.Point(resData[i].lng,resData[i].lat),new BMap.Point(lng,lat));
	                			//道路创建完之后的回调,可以直接获取百度返回路线的所有点位,且这些点位都是new(实例new Point)过之后的
	                			driving.setSearchCompleteCallback(function() {
	                				var routesAll =  driving.getResults().getPlan(0);
	                				//获取所有坐标点位的数组
	                				var routesArr = routesAll.getRoute(0).getPath();
	                				//获取线路段数(这里没有使用到)
	                				var routesCount = routesAll.getNumRoutes(0);
									var len = routesArr.length,
										newTotalArr = [];
									//添加拥堵点功能
									//路线分割的次数[2,3]
									var splitNum = Math.floor((Math.random()*2)+2);
	                				function GetNewArr(){
										//分割起始位置
										var startIndex = Math.floor((Math.random()*(len-2)));
										//分割的长度,每段的长度5%-15%
										var min = len*0.05+1;
										var max = len*0.15;
										var barL = Math.floor((Math.random()*(max-min))+min);
										return routesArr.slice(startIndex,barL+startIndex);
										//Array.slice(起索引,终索引);不改变原数组
										//Array.splice(起索引,长度);改变原数组
										//Array.splite(起索引,终索引);改变原数组
									}
									for(var i = 0;i < splitNum;i++){
										newTotalArr.push(GetNewArr());
									}
									//得到所有要添加的点位数组
									routesAllArr.push(newTotalArr);
									//最后创建事发点
		                			var myJ = j;
									if( myJ == resData.length-1 ){
											DrawLine();
											shifaFun();
									}
								});
                			})(j);
                        }
                        //添加拥堵点
						function DrawLine(){
							//随机颜色
							var colors = ["#ad0000","yellow"];
							$.each(routesAllArr,function (index,item) {
								$.each(item,function (index, value) {
									var colorIndex = Math.floor((Math.random()*colors.length));
									//添加画线,value中的数组元素是通过getPath(0)获取的,都是new Point之后的,所以这里直接传参value就可以,不用在定义点
									var polyline = new BMap.Polyline(value,{strokeColor:colors[colorIndex], strokeWeight:7, strokeOpacity:1});
									bm.addOverlay(polyline);
								})
							})
						}
						//事发点
						function shifaFun(){
                			var happyPoint = new BMap.Point(lng,lat);
							bm.addOverlay(new BMap.Marker(happyPoint,{icon:new BMap.Icon(ctx+"/images/marker-shifa.gif",new BMap.Size(45,65))}));
							var optNum2 = {
								position : happyPoint,
								offset : new BMap.Size(-78,-59)
							};
							var label2 = new BMap.Label(self.titleName, optNum2);
							label2.setStyle({
								width:'160px',
								color:'#fff',
								textAlign:'center',
								height : "28px",
								lineHeight : "28px",
								border:'none',
								background:"rgba(197,33,56,.5)",
								padding:"0",
								borderRadius:"6px",
								fontSize:"14px",
								textOverflow:"ellipsis",
								overflow:"hidden",
								border:"1px rgb(197,33,56) solid"
							});
							bm.addOverlay(label2);
							bm.centerAndZoom(new BMap.Point(lng,lat),14);
                        }
                    }
				}
			});
		}

实现小车实时行驶,且走过道路划线

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值