百度地图实现轨迹播放
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>
