百度地图实现多点轨迹连线,并回放

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 () {});
   }
}
  • 3
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值