1.首先对轨迹的js引入,百度地图第三方轨迹,回放LuShu.js
2.以下是实现轨迹多点连线的代码 供以参考:
因为我这是后台所有只有展示轨迹多点连线的样式,并且回放,抓取点位是前台 获取
根据人员查询线 var map = new BMap.Map("allmap"); map.centerAndZoom("北京",12); // 初始化地图,设置城市和地图级别。 map.enableScrollWheelZoom(); map.centerAndZoom(new BMap.Point(116.404, 39.915), 10);
3.通过ajax 请求后台代码 读出数据,并按以格式进行拆分 循环查询取出数据 并展示点位位置
$.ajax({ url: '<%=basePath%>trajectory/trajectory.do', type : "POST", data : userNerJson, success : function(data) { if (data.flag == true){ if(data.data != ""){ arrPois = []; for(var j = 0; j <data.data.length; j++) { arr = ""+data.data[j].POINT; //获取所有的坐标点 str = data.data[j].POINT.split(";");// 坐标点通过分号分割 } // 轨迹查询线 var pit = str[0]; // 获取数组中第一个值 var arry=pit.split(",");// 将第一个值用逗号分割 map.centerAndZoom(new BMap.Point(arry[0],arry[1]), 14); // 分割后的坐标作为起始坐标 for (var i=0;i<str.length;i++) // 循环数组 { arrPois.push(new BMap.Point(str[i].split(",")[0],str[i].split(",")[1]));// 循环数组中每一组的坐标 } var drv = new BMap.DrivingRoute('北京', { onSearchComplete: function(res) { if (drv.getStatus() == BMAP_STATUS_SUCCESS) { var plan = res.getPlan(0); map.addOverlay(new BMap.Polyline(arrPois, {strokeColor: '#337AB7'}));// 根据坐标位置连线 lushu = new BMapLib.LuShu(map,arrPois,{// 回放 defaultContent:"",//"从天安门到百度大厦" autoView:true,//是否开启自动视野调整,如果开启那么路书在运动过程中会根据视野自动调整 icon : new BMap.Icon('http://lbsyun.baidu.com/jsdemo/img/Mario.png', new BMap.Size(52,26),{anchor : new BMap.Size(27, 13)}), speed: 200, enableRotation:true,//是否设置marker随着道路的走向进行旋转 landmarkPois: [ {lng:116.314782,lat:39.913508,html:'加油站',pauseTime:2}, {lng:116.315391,lat:40.66,html:'高速公路收费<div><img src="http://map.baidu.com/img/logo-map.gif"/></div>',pauseTime:3}, {lng:116.381476,lat:58.88,html:'肯德基早餐<div><img src="http://ishouji.baidu.com/resource/images/map/show_pic04.gif"/></div>',pauseTime:2} ], }); } } }); drv.search('永顺镇', '百度大厦'); /*添加点标记begin*/ for(var i = 0; i<str.length; i++){ var arryy=str[i].split(","); var marker = new BMap.Marker(new BMap.Point(arryy[0], arryy[1]));//基于定位的这个点的点位创建marker map.addOverlay(marker); //将marker作为覆盖物添加到map地图上 } });
4.回放是通过路书来进行点击事件回放 直接回弹出,以上有代码实现,可以直接拿去运行 一样的情况下:
//绑定事件 回放
function huifang()
{
if(arrPois != ""){
lushu.start();
} else {
bootbox.alert("没有相关轨迹信息", function () {});
}
}