百度地图实现轨迹播放
2016-11-18 09:41
211 查看
百度地图实现轨迹播放
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>
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 百度地图实现车辆轨迹移动播放(baidu map api)
- 安卓实现在百度地图上播放历史轨迹
- 安卓实现在百度地图上播放历史轨迹
- 百度地图 实现行走轨迹描绘（觉得网上好多缺点，不全，自己写了一个）
- Android 百度地图 行动轨迹用彩色线画出实现方法
- 类似滴滴打车，多辆小车在地图上平滑移动的实现，基于百度地图实现（无轨迹）
- 百度地图基本使用及画线路轨迹播放问题
- 用VC2005实现视频文件与GPS轨迹同步播放
- 类似滴滴打车，多辆小车在地图上平滑移动的实现，基于百度地图实现（无轨迹）
- 类似滴滴打车，多辆小车在地图上平滑移动的实现，基于百度地图实现（轨迹已画好）
- 百度地图 历史轨迹播放
- 谷歌地图实现车辆轨迹移动播放(google map api)
- 百度地图开发之实现运动轨迹 <一>
- 百度地图中实现历史轨迹显示为BMap.InfoWindow添加多个不同时间点但相同经纬度点的信息
- 基于百度地图记录运动轨迹案例分析与实现
- 安卓关于在百度地图上实现轨迹回放的处理
- 使用“天地图”实现“百度地图”的 GPS单点沿线运动，来模拟物体运动轨迹。
- baidu map,百度地图,轨迹播放
- 百度地图开发之实现运动轨迹 <二>
- 基于百度地图记录运动轨迹案例分析与实现