百度地图 多车GPS实时监控

多车监控时 infowindows不好控制 搞了很长时间 终于纠正了bug



//左边树

var menuTree;
//地图
var map;
//淡出框1
var dlg_Edit1;
//淡出框2
var dlg_Edit2;
//marker下红色框
var label;
//定时器
var interval;
//searchInfoWindowClick状态(0InfoWindow未打开,1InfoWindow以打开)
var searchInfoWindowClick = 0;
//创建检索信息窗口对象
var searchInfoWindow = null;
//左侧checkbox选中String
var s;
//markerList
var arr ;
//searchInfoWindowd正在打开的marker
var markerId;
//mark点;
var m1;
//title
var title;
/**
 *初始化;
 */
$(function () {
    //初始化Toolbar
    initButton();
    // 创建Map实例
    initMap();
    // 创建checkbox
    menuTree = $('#menuTree').tree({
        title: '车辆实时监控',
        iconCls: 'icon-save',
        checkbox:'true',
        url: '../vehicleMonitor/addTree.action',
        onCheck: function(node){
            //获取id串
            var nodes = $('#menuTree').tree('getChecked');
            s = '';
            for(var i=0; i<nodes.length; i++){
            if (s != '') s += ',';
            s += nodes[i].id;
            }
            //重置
            resetting();
            //画线
            if(null != s && "" != s){
                //调用
                startDraw();
            }
        },
    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(point,13);
}

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

/**
 *开始画图;
 */
function startDraw(){
    //清楚标记
    //map.clearOverlays();
    arr = new Array();
    //drawlineTimes();
    interval = window.setInterval(function(){
        drawlineTimes();
        }, 2000);
}

/**
 *循环调用画图;
 */
function drawlineTimes(){
    $.ajax({
        type: 'POST',
        url: '../vehicleMonitor/selRoadMarker.action',
        data:{
            "vehicleMarkerInput.counterOne":$("#count1").val(),
            "vehicleMarkerInput.counterTwo":$("#count2").val(),
            "vehicleMarkerInput.idList":s
        },
        success: function (data) {
            var json=eval("("+data+")");
            map.clearOverlays();
            $("#count1").val(json.counterOne);
            $("#count2").val(json.counterTwo);
            var markers = json.marker;
            for(var i = 0; i < markers.length; i++){
                createMarker(markers[i].dataXY.x,markers[i].dataXY.y,markers[i].id);
                
            }
            map.setViewport(arr);  
        }
     });
}

/**
 *创建marker,label;
 */
function createMarker(x,y,id){
    //var myIcon = new BMap.Icon("../image/akg.png", new BMap.Size(150,150));
    //m1 = new BMap.Marker(myP2,{icon:myIcon});
    var myP2 = new BMap.Point(x,y);
    arr.push(myP2);
    m1 = new BMap.Marker(myP2);
    //设置searchInfoWindow地理位置
    if(1 == searchInfoWindowClick && id == markerId){
        markInfoWindows(id);
        //打开searchInfoWindow
        searchInfoWindow.open(m1);
    }
    m1.addEventListener("click", function(e){       
        markInfoWindows(id);
        //打开searchInfoWindow
        searchInfoWindow.open(m1);
    });
    var opts = {
              //指定文本标注所在的地理位置
              position : myP2,   
              //设置文本偏移量
              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);
}

/**
 *创建markInfoWindows;
 */
function markInfoWindows(id){
    $.ajax({
        type: 'POST',
        url: '../vehicleMonitor/selVehicleMonitorById.action',
        data:{
            "vehicleMonitorInput.id":id
        },
        async:false,
        error: function () {
            $.messager.alert('提示信息', '失败!', 'error');
        },
        success: function (data) {
            var json=eval("("+data+")");
            title = json.company;
        }
    });
    
    //显示的代码
    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,
        enableSendToPhone : false,//自动平移
        searchTypes   :[
            //BMAPLIB_TAB_SEARCH,   //周边检索
            //BMAPLIB_TAB_TO_HERE,  //到这里去
            //BMAPLIB_TAB_FROM_HERE //从这里出发
        ]
    });
    //记录searchInfoWindowClick打开和关闭状态。
    searchInfoWindow.addEventListener("close", function(e) {
        markerId = id;
        searchInfoWindowClick = 0;
    });
    searchInfoWindow.addEventListener("open", function(e) {
        markerId = id;
        searchInfoWindowClick = 1;
    });
}

/**
 *init div button;
 */
function initButton(){
    dlg_Edit1 = $('#dlg1').dialog({
        closed: true,
        modal: true,
        buttons: [{
            text: '保存',
            iconCls: 'icon-save',
            /*handler: saveData*/
        },{
            text: '关闭',
            iconCls: 'icon-no',
            handler: function () {
                dlg_Edit1.dialog('close');
            }
        }]
    });    
    dlg_Edit2 = $('#dlg2').dialog({
        closed: true,
        modal: true,
        buttons: [{
            text: '保存',
            iconCls: 'icon-save',
            /*handler: saveData*/
        },{
            text: '关闭',
            iconCls: 'icon-no',
            handler: function () {
                dlg_Edit2.dialog('close');
            }
        }]
    });
    //dlg_Edit1.dialog('open');
    //dlg_Edit2.dialog('close');
}

/**
 *重置数据;
 */
function resetting(){
    $('#count1').val(0);
    $('#count2').val(0);
    map.clearOverlays();
    window.clearInterval(interval);
    arr = new Array();
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章