百度地图添加路线轨迹

基于上篇实现几个轨迹点实现连线
效果图

上篇显示了多个设备点。现在实现通过该设备点点击的时候查看该设备的运动轨迹。吧上篇文章的方法重新修改一下即可。其他方法不用变，这个稍微修改一下，获取到对弈你的id，到时候通过id查询到该设备存在的经纬度记录，然后把数据加载出来。这个方法原来是弹出信息窗口的，改编成路径跳转就行，跳转的时候带上id。
function openInfo(content,e){
window.open(‘showLine?id=’+content);
}
跳到对应的页面之后，查询对应的数据，上代码

<script type="text/javascript">
  	 var myIcon = new BMap.Icon("${pageContext.request.contextPath }/static/img/38375162504f550ebe57afd1912b4b3.png",new BMap.Size(60,80));
  	 var x = "117.00";
  	 var y = "36.40";
          var lev1 = "11";
  		$(function(){
  			showMap();
  	    });
  	
  		var map;
  		function showMap(){
			map = new BMap.Map("container");    //创建地图
			map.centerAndZoom(new BMap.Point(x,y), lev1);//初始化地图
			map.addControl(new BMap.MapTypeControl());//添加地图类型控件
			//map.setMapType(BMAP_HYBRID_MAP);//此地图类型展示卫星和路网的混合视图
			map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
		    map.enableScrollWheelZoom();//启用地图滚轮放大缩小
		    map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
		    map.enableKeyboard();//启用键盘上下左右键移动地图
		   
		    //地图显示位置
		    var city = new BMap.LocalSearch(map,{renderOptions:{map:map,autoViewport:true}});   //地图显示到查询结果处
		    var s = $("#wz").val();
		    city.search(s);   //查找城市
		    
		    var dwname=$('#sydwmc').val();
		    var linePoints = [];
		    $.ajax({
				url:"getMap",
				type:"post",
				data:{"dwname":dwname},
				dataType:"json",
				success:function(result){
					for(var i=15;i<25;i++){
						//显示标注
						var pt = new BMap.Point(result[i].x, result[i].y);
						var marker = new BMap.Marker(pt,{icon:myIcon});        // 创建标注    
						map.addOverlay(marker); 
						//显示文本
						var label = new BMap.Label(result[i].dw,{offset:new BMap.Size(20,-10)});
						marker.setLabel(label);
						//添加折线
						linePoints.push(pt);
						var polyline = new BMap.Polyline(linePoints, {strokeColor:"red", strokeWeight:2, strokeOpacity:0.5});   //创建折线
						map.addOverlay(polyline);   //增加折线
					}
					setZoom(linePoints);//重新规划试图效果
				},
				error:function(){
					alert("地图显示异常,请刷新重试!");
				}
				
			});
		}
  		
		//根据点信息实时更新地图显示范围，让轨迹完整显示。设置新的中心点和显示级别
		function setZoom(bPoints){
			var view = map.getViewport(eval(bPoints));
			var mapZoom = view.zoom; 
			var centerPoint = view.center; 
			map.centerAndZoom(centerPoint,mapZoom);
		}
		
			</script>