百度地图轨迹回放快进后退停止播放暂停的实现

来源：互联网发布：js获取某个class 编辑：程序博客网时间：2024/05/16 12:00

--------------------------------------------------------------

百度地图才接触，javascript也不过是学了几天

用了1天完成了类似播放器的功能，代码不够美观

再加上对api的不熟悉，所以我自己加了很多用于

判断的flag，大家凑合看，共同学习，共同进步。

如果有更好的办法，请指教和更正。。

---------------------------------------------------------------

//左边树

var menuTree;
//地图
var map;
//时间框
var dlg_Edit1;
//markerArr
var arr;
//label
var label;
//marker
var m1;
//循环
var interval;
//坐标点下标
var counterM = 0;
//searchInfoWindow
var searchInfoWindow;
//是否正在回放(0未回放,1在回放)
var startButtonStats=0
//searchInfoWindowClick状态(0InfoWindow未打开,1InfoWindow以打开)
var searchInfoWindowClick = 0;
//默认回放速度
var speedTimes=1000;
//回放结束(可以调用CM 0,不许调用CM 1)
var reIs = 0;

/**
*初始化;
*/
$(function () {
   //创建Map实例
   initMap();
   //绑定事件
   startEvent();
   //init div button
   initButton();
   // 创建tree
   menuTree = $('#menuTree').tree({
       title: '车辆轨迹回放',
        iconCls: 'icon-save',
        url: '../vehicleMonitor/addTree.action',
        onClick: function(node){
           //叶节点
           if(isLeaf()){
               $("#id").val(node.id);
               //弹出查询时间框
               divSelBeToEnTimeOpen();
           }
        },
   animate: true
    });
    $('body').layout();
});

/**
*编写自定义函数,创建标注;
*/
function initMap(){
   createMap();
   addMapControl();
}

/**
*创建地图函数;
*/
function createMap(){
   //在百度地图容器中创建一个地图
    map = new BMap.Map("allmap");
    //定义一个中心点坐标
    var point = new BMap.Point(116.404, 39.915);
    //设定地图的中心点和坐标并将地图显示在地图容器中
    map.centerAndZoom('北京',13);
}

/**
*地图控件添加函数;
*/
function addMapControl(){
   // 添加平移缩放控件
   map.addControl(new BMap.NavigationControl());
   // 添加比例尺控件
   map.addControl(new BMap.ScaleControl());
   //添加缩略地图控件
   map.addControl(new BMap.OverviewMapControl());
   //启用滚轮放大缩小
   map.enableScrollWheelZoom();
   //启用键盘上下左右键移动地图
   map.enableKeyboard();
}

/**
*播放条绑定事件;
*/
function startEvent(){
   $("#run").click(function() {
       startLushu();
   });
   $("#stop").click(function() {
       stopLushu();
   });
   $("#pause").click(function() {
       pauseLushu();
   });
   $("#speedUp").click(function() {
       speedUpLushu();
   });
   $("#speedReduction").click(function() {
       speedReductionLushu();
   });
}

/**
*init div button;
*/
function initButton(){
   //弹出框
   dlg_Edit1 = $('#dlg1').dialog({
        closed: true,
        modal: true,
        buttons: [{
            text: '查询',
            iconCls: 'icon-save',
            handler: selBeToEnTime
        },{
            text: '关闭',
            iconCls: 'icon-no',
            handler: function () {
                dlg_Edit1.dialog('close');
            }
        }]
    });
   //Slider
    $('#videoSlider').slider({
        tipFormatter: function(value){
        return value + '%';
        },
       onChange: function(value){
           //未回放
           if(startButtonStats == 0 && reIs == 0){
               if(null != arr){
                   //修改点下标
                   counterM = parseInt(arr.length * value / 100);
                   //创建marker
                   createMarker();
               }
           //设置成未回访
           }else if(startButtonStats == 0 && reIs == 1){
               reIs = 0;
           }
       }
    });
}

/**
*弹出查询时间框;
*/
function divSelBeToEnTimeOpen(){
   dlg_Edit1.dialog('open');
   //置空
   $('#starTime').datetimebox('setValue', '');
   $('#endTime').datetimebox('setValue', '');

}

/**
*查询回放数据;
*/
function selBeToEnTime(){
   if($("#form1").form('validate')){
       $.ajax({
           type: 'POST',
           url: '../vehicleTrack/selBeToEnTime.action',
            data:{
               "vehicleTrackInput.id":$("#id").val(),
               "vehicleTrackInput.starTime":$('#starTime').datetimebox('getValue'),
               "vehicleTrackInput.endTime":$('#endTime').datetimebox('getValue')
            },
            success: function (data) {
               dlg_Edit1.dialog('close');
               //重置页面变量
               resetting();
               var json=eval("("+data+")");
               var markerArr =   json.arr;
               arr = new Array();
               for(var i = 0 ;i < markerArr.length;i++){
                   arr.push(new BMap.Point(markerArr[i].x,markerArr[i].y));
               }
               var polyline = new BMap.Polyline([], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
               polyline.setPath(arr);
               //添加线路
               map.addOverlay(polyline);
               //最佳视野
               map.setViewport(arr);
            }
       });
   };
}

/**
*重置页面变量;
*/
function resetting(){
   speedTimes=1000;
   $('#speed').text(1);
   startButtonStats = 0;
   window.clearInterval(interval);
   counterM = 0;
   $('#videoSlider').slider('setValue',0);
}

/**
*开始;
*/
function startLushu(){
   if(0 == startButtonStats){
       startButtonStats = 1;
       interval = window.setInterval(function(){
           createMarker();
           }, speedTimes);
   }
}

/**
*停止;
*/
function stopLushu(){
   resetting();
}

/**
*暂停;
*/
function pauseLushu(){
   startButtonStats = 0;
   window.clearInterval(interval);
}

/**
*加速;
*/
function speedUpLushu(){
   var speed = $('#speed').text();
   if(speed > 0 && speed < 8 ){
       speed = speed * 2;
       $('#speed').text(speed);
       speedTimes = 1000/speed;
       if(startButtonStats == 1){
           window.clearInterval(interval);
           startButtonStats = 0;
           startLushu();
       }
   }
}

/**
*减速;
*/
function speedReductionLushu(){
   var speed = $('#speed').text();
   if(speed > 1 && speed < 9 ){
       speed = speed / 2;
       $('#speed').text(speed);
       speedTimes = 1000/speed;
       if(startButtonStats == 1){
           window.clearInterval(interval);
           startButtonStats = 0;
           startLushu();
       }
   }
}

/**
*创建marker,label;
*/
function createMarker(){
   var point = arr[counterM];
   if(counterM < arr.length){
       counterM = counterM + 1;
   }else{
       //不再允许调用createMarker();
       reIs = 1;
       resetting();
   }
   //var myIcon = new BMap.Icon("../image/akg.png", new BMap.Size(150,150));
    //m1 = new BMap.Marker(myP2,{icon:myIcon});
   //map.clearOverlays();
   map.removeOverlay(label);
   map.removeOverlay(m1);
    //添加标记
   m1 = new BMap.Marker(point);
   //设置searchInfoWindow打开状态
   if(1 == searchInfoWindowClick){
       searchInfoWindow.open(m1);
   }
   //marker绑定事件
    m1.addEventListener("click", function(e){
       markInfoWindows(id)
        searchInfoWindow.open(m1);
    });
    var opts = {
              position : point,    // 指定文本标注所在的地理位置
              offset   : new BMap.Size(-30, 0)    //设置文本偏移量

           }
    label = new BMap.Label("辽A54250", opts); // 创建文本标注对象
   label.setStyle({
       color : "red",
       fontSize : "12px",
       height : "20px",
       lineHeight : "20px",
       fontFamily:"微软雅黑"
   });
   map.addOverlay(label);
    map.addOverlay(m1);
    //Slider百分比设置
   var x = parseInt(100 * counterM / arr.length);
   $('#videoSlider').slider('setValue',x);
}

/**
*创建markInfoWindows;
*/
function markInfoWindows(id){
   $.ajax({
        type: 'POST',
        url: '../vehicleTrack/selVehicleTrackInfo.action',
        data:{
           "vehicleTrackInput.id":$("#id").val()
        },
        async:false,
        error: function () {
            $.messager.alert('提示信息', '失败!', 'error');
        },
        success: function (data) {
           var json=eval("("+data+")");
           title = json.company;
           markInfoWindowsData(json.company);
        }
    });

}

/**
*init searchInfoWindow;
*/
function markInfoWindowsData(title){

   var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
    '地址：北京市海淀区上地十街10号<br/>电话：(010)59928888<br/>简介：百度大厦位于北京市海淀区西二旗地铁站附近，为百度公司综合研发及办公总部。'+'</div>'+
    '<div style="margin:0;line-height:20px;padding:2px;">' +
    '<a href="javascript:void(0)" onclick="$(\'#dlg1\').dialog(\'open\')"><img src="../image/baidu.jpg" alt="" style="float:left;zoom:1;overflow:hidden;width:35px;height:35px;"/></a>' +
    '<a href="javascript:void(0)" onclick="$(\'#dlg2\').dialog(\'open\')"><img src="../image/baidu.jpg" alt="" style="float:left;zoom:1;overflow:hidden;width:35px;height:35px;margin-left:5px;"/></a>' +
    '</div>';

   //创建检索信息窗口对象
   searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
       title : title,      //标题
       width : 290,             //宽度
       height : 130,              //高度
       panel : "panel",         //检索结果面板
       enableAutoPan : true,     //自动平移
       searchTypes   :[
           //BMAPLIB_TAB_SEARCH,   //周边检索
           //BMAPLIB_TAB_TO_HERE, //到这里去
           //BMAPLIB_TAB_FROM_HERE //从这里出发
       ]
   });
   //记录searchInfoWindowClick打开和关闭状态。
   searchInfoWindow.addEventListener("close", function(e) {
       searchInfoWindowClick = 0;
   });
   searchInfoWindow.addEventListener("open", function(e) {
       searchInfoWindowClick = 1;
   });
}

/**
*判断树是否是子节点，是子节点返回true，不是返回false;
*/
function isLeaf(){
    var node = $('#menuTree').tree('getSelected');
    var b = $('#menuTree').tree('isLeaf',node.target);
    return b;
}

百度地图轨迹回放 快进 后退 停止 播放 暂停 的实现

百度地图轨迹回放快进后退停止播放暂停的实现