首页 > 编程学习 > 百度地图实现轨迹播放

百度地图实现轨迹播放

发布时间:2022/6/23 23:31:33

百度地图实现轨迹播放

1、以下代码作为参考,也是实现轨迹的核心代码

2、为什么要帖出这个百度轨迹播放代码,是因为百度实现轨迹回放比高德地图复杂些,另外百度轨迹播放有些细节处理不好会导致使用效果很差,比如地图跟随小车移动如果控制不好,会导致效果很差等,减少大家在做百度轨迹的弯路

3、实现了根据一系列坐标数组,回放轨迹、自动播放轨迹、地图跟随小车移动

4、没解决到暂停播放功能,很奇怪,希望大家解决了,贴出解决办法


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>


<!DOCTYPE HTML>
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>轨迹</title>
    


<style type="text/css">
.Maptianw {
width: 52px;
height: 32px;
line-height: 32px !important;
border-radius: 3px;
background: #1550B6;
color: #ffffff !important;

font-size: 12px;
text-align: center;
top: 11px;
left: 430px;
z-index: 1;
cursor: pointer;
}
img {
width: 32px;
height: 32px;
cursor: pointer;
line-height: 32px !important;
border-radius: 3px;
background: #1550B6;
}
img:hover {
cursor: pointer;
line-height: 32px !important;
border-radius: 3px;
background: #ecedef;
}


.Maptianw input {
display: block;
margin: 10px 0px 0px 8px;
float: left;
}


.Maptianw span {
display: block;
float: left;
}
</style>
  </head>
  
<jsp:include page="/common/common.jsp" flush="true" />
<script type="text/javascript" src="<%=basePath%>company/login/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="<%=basePath%>common/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="<%=basePath%>common/js/bootstrap.min.js"></script>

  <script type="text/javascript">
  var _bMap=null;//百度地图对象
  var parent=null;
  var arrayPoints=null;
  var startlon="";
var endlat="";
  var startpic='<%=basePath%>/map/images/icon_st.png';
  var endpic='<%=basePath%>/map/images/icon_en.png';
  var picCar='<%=basePath%>/map/images/car.png';
  var play_start='<%=basePath%>/img/play_start.png';
  var play_play='<%=basePath%>/img/play_play.png';
  var play_stop='<%=basePath%>/img/play_stop.png';
  var play_res="<%=basePath%>/img/play_set.png";
  var movePolyline=new Array();//轨迹线
  var lushu;
  var car; //汽车图标
  var marker;
  var label; //信息标签
  var centerPoint;
  //var timer; //定时器
  var index = 0; //记录播放到第几个point
  var BMap;
  var followChk, playBtn, pauseBtn, resetBtn; //几个控制按钮
  var me;
  hwui().require('upload',"slider",'attachment','accordion','autocomplete','calendar', 'colorpicker','combobox','datepicker','datetimepicker','dialog','editor', 'validator', 'tab', 'effect', 'grid',  
'treeview','menu', 'numerictextbox','slider','tab','tooltip','effect','binder',  'dropdownlist', 'datetimepicker',
'message', 'treeview', 'editor',function($, hwui,config) {

     var $frame =$("#mapModalIframe");
     var id='<%=request.getParameter("id")%>';
     var personId='<%=request.getParameter("personId")%>';
     var deadlineStarttime='<%=request.getParameter("deadlineStarttime")%>';
     var deadlineEndtime='<%=request.getParameter("deadlineEndtime")%>';
     followChk = document.getElementById("follow");
       playBtn = document.getElementById("play");
       resetBtn = document.getElementById("reset");
       resetBtn.addEventListener("click", referesh);
     $frame.load(function () {
     //地图加载完成
     document.getElementById('mapModalIframe').contentWindow.callMapInitSuccessFunc(function(){
     
     parent = document.getElementById('mapModalIframe').contentWindow;
     parent.setCallHideControl();
     parent.setCallbackMapAddress("","","");
     BMap=parent.BMap;
     getPersonTrack();
    });
     });
     
     /**
     *获取坐标
     */
    function getPersonTrack(){
     
    arrayPoints=new Array();
    _bMap=parent.customMap.mMap;
    $.ajax({
    url:"",
    type:"post",
    dataType: "json",
    data:{taskId:id,personId:personId,startTime:deadlineStarttime,endTime:deadlineEndtime},
    success: function(result) {
   
    if(result==null|| result=="" ||result.length<=0){
    hwui.Msg.info("不存在轨迹!");
return;
    };
    var points="";
   
    var lon="";
    var lat="";
    for ( var int = 0; int < result.length; int++) {
    var lon=result[int].longitude;
    var lat=result[int].latitude;
    var point=lon+","+lat;
points+=(points=="")?point:";"+point;
if(int==0){
startlon=lon;
    endlat=lat;
}
arrayPoints.push(new  parent.BMap.Point(lon, lat) );
}
   
    //轨迹
    parent.mapMarker.addPolyline(parent.customMap,points,1,"#EE2C2C",4,null);
    //添加起点和终点
   
    parent.mapMarker.addPictrueMarker2(parent.customMap,startlon,endlat,startpic,37,62,null,null);
   
    parent.mapMarker.addPictrueMarker2(parent.customMap,lon,lat,endpic,37,62,null,null);
   
    setControlPlay(true);
    if( result.length>1){
    playRout(_bMap);
    }
    }
    });
    }
   
     
     /**
     路线回放
     **/
     
     function playRout(map){
     if(arrayPoints.length<=0){
     hwui.Msg.info("不存在轨迹!");
     return;
     }
 map.setViewport(arrayPoints);
//parent.getCallPanByPointAndLevel(startlon,endlat,15);
 parent.BMapLib.LuShu.prototype._move=function(arrayPoints,targetPos,effect) {
        var pointsArr=[arrayPoints,targetPos]; //点数组
        me = this;
               //当前的帧数
               currentCount = 0,
               //步长,米/秒
               timer = 100,
               step = this._opts.speed / (1000 / timer),
               //初始坐标
               init_pos = this._projection.lngLatToPoint(arrayPoints),
               //获取结束点的(x,y)坐标
               target_pos = this._projection.lngLatToPoint(targetPos),
               //总的步长
               count = Math.round(me._getDistance(init_pos, target_pos) / step);
 
           //如果小于1直接移动到下一点
           if (count < 1) {
               me._moveNext(++me.i);
               return;
           }
           me._intervalFlag = setInterval(function() {
           //两点之间当前帧数大于总帧数的时候,则说明已经完成移动
           if (currentCount >= count) {
               clearInterval(me._intervalFlag);
               //移动的点已经超过总的长度
        if(me.i > me._path.length){
return;
        }
        //运行下一个点
               me._moveNext(++me.i);
             
           }else {
           
                       currentCount++;
                       var x = effect(init_pos.x, target_pos.x, currentCount, count),
                           y = effect(init_pos.y, target_pos.y, currentCount, count),
                           pos = me._projection.pointToLngLat(new BMap.Pixel(x, y));
                       if(followChk.checked) {
                       me._map.setCenter(pos);
      }


                       //设置marker
                       if(currentCount == 1){
                           var proPos = null;
                           if(me.i - 1 >= 0){
                               proPos = me._path[me.i - 1];
                           }
                           if(me._opts.enableRotation == true){
                                me.setRotation(proPos,arrayPoints,targetPos);
                           }
                           if(me._opts.autoView){
                               if(!me._map.getBounds().containsPoint(pos)){
                               
                                   me._map.setCenter(pos);
                               }   
                           }
                       }
                       //正在移动
                       me._marker.setPosition(pos);
                       //设置自定义overlay的位置
                       me._setInfoWin(pos);
                     
               }
       },timer);
       };
       //设置沿路线移动
       lushu = new  parent.BMapLib.LuShu(map,arrayPoints,{
               defaultContent:"",
               autoView:true,//是否开启自动视野调整,如果开启那么路书在运动过程中会根据视野自动调整 defaultContent:"",
               icon  : new BMap.Icon(picCar , new BMap.Size(52,26),{anchor : new BMap.Size(27, 13)}),
               speed: 1500,
               enableRotation:true,//是否设置marker随着道路的走向进行旋转
               landmarkPois: [ ]
               }); 
       setTimeout(function(){
      play();//启动播放
      },500);
       
     }
     
     
    //播放
     function play() {
    //缩放到轨迹
parent.getCallPanByPointAndLevel(startlon,endlat,15);
       lushu.start();
       setControlPlay(false);
     }
     //暂停
     function pauseTrack() {
   
     setControlPlay(true);
     referesh();
     }
     function setControlPlay(bln){
    if(bln==true){
    //播放
    $("#play").attr("src",play_play);
    playBtn.removeEventListener("click", pauseTrack);
    playBtn.addEventListener("click", play);
    }else{
    //暂停播放
     $("#play").attr("src",play_res);
    playBtn.removeEventListener("click", play);
    playBtn.addEventListener("click", pauseTrack);
   
    }
    function referesh(){
    clearInterval( me._intervalFlag);
    _bMap.clearOverlays();
getPersonTrack();
    }
  });
  
  </script> 
  <body>


<iframe id='mapModalIframe' style='height: 500px;width: 100%;border: none;' src='<%=basePath%>map/selectAddress.jsp'>
    </iframe>
<div id="hidden-for-desc"  align="center">
  <label>路线轨迹播放:</label>
    <label class="Maptianw" title="画面跟随"> <input id="follow" type="checkbox" checked="checked"><label for="follow" >跟随</label> </label>
   <a href='javascript:'><img id="play" src='<%=basePath%>/common/img/play_stop.png'  title="播放轨迹" /></a>
<a href='javascript:'  style="display: none" ><img id="reset" style="display: none" src='<%=basePath%>/common/img/play_set.png'  title="刷新路线" /></a>
</div>
  </body>
</html>


Copyright © 2010-2022 ngui.cc 版权所有 |关于我们| 联系方式| 豫B2-20100000