百度地图轨迹展示

// 百度地图API功能
var map = new BMap.Map("allmap",{minZoom:9,maxZoom:11});    // 创建Map实例
// var map = new BMap.Map("allmap");    // 创建Map实例

map.centerAndZoom(new BMap.Point(121.402584,38.301808), 10);  // 初始化地图,设置中心点坐标和地图级别121.402584,38.301808
map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP ]}));   //添加地图类型控件
// map.setCurrentCity("大连");          // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(false);     //开启鼠标滚轮缩放
var zPoints = new Array();           //缩放icon
//地图样式
var styleJson =  [
    {
        "featureType": "land",
        "elementType": "geometry",
        "stylers": {
            "visibility": "on",
            "color": "#f5f5f5ff"
        }
    }, {
        "featureType": "water",
        "elementType": "geometry",
        "stylers": {
            "visibility": "on",
            "color": "#bedbf9ff"
        }
    }, {
        "featureType": "green",
        "elementType": "geometry",
        "stylers": {
            "visibility": "on",
            "color": "#d0edccff"
        }
    }, {
        "featureType": "building",
        "elementType": "geometry",
        "stylers": {
            "visibility": "on"
        }
    }, {
        "featureType": "building",
        "elementType": "geometry.fill",
        "stylers": {
            "color": "#ffffffb3"
        }
    }, {
        "featureType": "building",
        "elementType": "geometry.stroke",
        "stylers": {
            "color": "#dadadab3"
        }
    }, {
        "featureType": "subwaystation",
        "elementType": "geometry",
        "stylers": {
            "visibility": "on",
            "color": "#b15454B2"
        }
    }, {
        "featureType": "education",
        "elementType": "geometry",
        "stylers": {
            "visibility": "on",
            "color": "#e4f1f1ff"
        }
    }, {
        "featureType": "medical",
        "elementType": "geometry",
        "stylers": {
            "visibility": "on",
            "color": "#f0dedeff"
        }
    }, {
        "featureType": "scenicspots",
        "elementType": "geometry",
        "stylers": {
            "visibility": "on",
            "color": "#e2efe5ff"
        }
    }, {
        "featureType": "highway",
        "elementType": "geometry",
        "stylers": {
            "visibility": "on",
            "weight": 4
        }
    }, {
        "featureType": "highway",
        "elementType": "geometry.fill",
        "stylers": {
            "color": "#f7c54dff"
        }
    }, {
        "featureType": "highway",
        "elementType": "geometry.stroke",
        "stylers": {
            "color": "#fed669ff"
        }
    }, {
        "featureType": "highway",
        "elementType": "labels",
        "stylers": {
            "visibility": "on"
        }
    }, {
        "featureType": "highway",
        "elementType": "labels.text.fill",
        "stylers": {
            "color": "#8f5a33ff"
        }
    }, {
        "featureType": "highway",
        "elementType": "labels.text.stroke",
        "stylers": {
            "color": "#ffffffff"
        }
    }, {
        "featureType": "highway",
        "elementType": "labels.icon",
        "stylers": {
            "visibility": "on"
        }
    }, {
        "featureType": "arterial",
        "elementType": "geometry",
        "stylers": {
            "visibility": "on",
            "weight": 2
        }
    }, {
        "featureType": "arterial",
        "elementType": "geometry.fill",
        "stylers": {
            "color": "#d8d8d8ff"
        }
    }, {
        "featureType": "arterial",
        "elementType": "geometry.stroke",
        "stylers": {
            "color": "#ffeebbff"
        }
    }, {
        "featureType": "arterial",
        "elementType": "labels",
        "stylers": {
            "visibility": "on"
        }
    }, {
        "featureType": "arterial",
        "elementType": "labels.text.fill",
        "stylers": {
            "color": "#525355ff"
        }
    }, {
        "featureType": "arterial",
        "elementType": "labels.text.stroke",
        "stylers": {
            "color": "#ffffffff"
        }
    }, {
        "featureType": "local",
        "elementType": "geometry",
        "stylers": {
            "visibility": "on",
            "weight": 1
        }
    }, {
        "featureType": "local",
        "elementType": "geometry.fill",
        "stylers": {
            "color": "#d8d8d8ff"
        }
    }, {
        "featureType": "local",
        "elementType": "geometry.stroke",
        "stylers": {
            "color": "#ffffffff"
        }
    }, {
        "featureType": "local",
        "elementType": "labels",
        "stylers": {
            "visibility": "on"
        }
    }, {
        "featureType": "local",
        "elementType": "labels.text.fill",
        "stylers": {
            "color": "#979c9aff"
        }
    }, {
        "featureType": "local",
        "elementType": "labels.text.stroke",
        "stylers": {
            "color": "#ffffffff"
        }
    }, {
        "featureType": "railway",
        "elementType": "geometry",
        "stylers": {
            "visibility": "on",
            "weight": 1
        }
    }, {
        "featureType": "railway",
        "elementType": "geometry.fill",
        "stylers": {
            "color": "#949494ff"
        }
    }, {
        "featureType": "railway",
        "elementType": "geometry.stroke",
        "stylers": {
            "color": "#ffffffff"
        }
    }, {
        "featureType": "subway",
        "elementType": "geometry",
        "stylers": {
            "visibility": "on",
            "weight": 1
        }
    }, {
        "featureType": "subway",
        "elementType": "geometry.fill",
        "stylers": {
            "color": "#d8d8d8ff"
        }
    }, {
        "featureType": "subway",
        "elementType": "geometry.stroke",
        "stylers": {
            "color": "#ffffffff"
        }
    }, {
        "featureType": "subway",
        "elementType": "labels",
        "stylers": {
            "visibility": "on"
        }
    }, {
        "featureType": "subway",
        "elementType": "labels.text.fill",
        "stylers": {
            "color": "#979c9aff"
        }
    }, {
        "featureType": "subway",
        "elementType": "labels.text.stroke",
        "stylers": {
            "color": "#ffffffff"
        }
    }, {
        "featureType": "continent",
        "elementType": "labels",
        "stylers": {
            "visibility": "on"
        }
    }, {
        "featureType": "continent",
        "elementType": "labels.icon",
        "stylers": {
            "visibility": "on"
        }
    }, {
        "featureType": "continent",
        "elementType": "labels.text.fill",
        "stylers": {
            "color": "#333333ff"
        }
    }, {
        "featureType": "continent",
        "elementType": "labels.text.stroke",
        "stylers": {
            "color": "#ffffffff"
        }
    }, {
        "featureType": "city",
        "elementType": "labels.icon",
        "stylers": {
            "visibility": "on"
        }
    }, {
        "featureType": "city",
        "elementType": "labels",
        "stylers": {
            "visibility": "on"
        }
    }, {
        "featureType": "city",
        "elementType": "labels.text.fill",
        "stylers": {
            "color": "#454d50ff"
        }
    }, {
        "featureType": "city",
        "elementType": "labels.text.stroke",
        "stylers": {
            "color": "#ffffffff"
        }
    }, {
        "featureType": "town",
        "elementType": "labels.icon",
        "stylers": {
            "visibility": "on"
        }
    }, {
        "featureType": "town",
        "elementType": "labels",
        "stylers": {
            "visibility": "off"
        }
    }, {
        "featureType": "town",
        "elementType": "labels.text.fill",
        "stylers": {
            "color": "#454d50ff"
        }
    }, {
        "featureType": "town",
        "elementType": "labels.text.stroke",
        "stylers": {
            "color": "#ffffffff"
        }
    }, {
        "featureType": "road",
        "elementType": "geometry",
        "stylers": {
            "visibility": "off"
        }
    }, {
        "featureType": "road",
        "elementType": "labels",
        "stylers": {
            "visibility": "off"
        }
    }, {
        "featureType": "village",
        "elementType": "labels",
        "stylers": {
            "visibility": "off"
        }
    }, {
        "featureType": "district",
        "elementType": "labels",
        "stylers": {
            "visibility": "on"
        }
    }];
// map.setMapStyleV2({styleJson:styleJson});
map.setMapStyle({styleJson:styleJson});
// resizeMapContainer();
// var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
//     scale: 0.6,//图标缩放大小
//     strokeColor:'#fff',//设置矢量图标的线填充颜色
//     strokeWeight: '1',//设置线宽
// });
// var icons = new BMap.IconSequence(sy, '10', '20');


//封装ajax的一些常用参数  //data数据可以为空
function ajax_All(sync, cache, type, url, datatype, data, func) {
    $.ajax({
        sync: sync,
        cache: cache,
        type: type,
        url: url,
        dataType: datatype,
        data: data,
        error: function (data) {
            //请求失败时被调用的函数
            alert("传输失败:" + data);
        },
        success: function (data) {
            func(data);
        }
    });
}

// ajax_All("true", "false", "POST", "/ship/getAllShipName", "json", "", getShipList);//
//
// function getShipList(data) {  //自己的函数   可以对data 这个数据对象进行操作或遍历数据
//     // alert(data);
//     console.log(data, "DDDD");
//     var opt = "<option value='all' selected = \'selected\'>全部</option>";
//     $("select[name=list]").append(opt);
//     // 默认选中全部,调取全部船只
//     getValue();
//     var beanList = data;
//     var selectNext = $("#list");
//     for (var i = 0; i < beanList.length; i++) {
//         selectNext.append("<option value=" + beanList[i] + ">" + beanList[i] + "</option>");
//     }
//     //渲染option List, 选择船只触发ajax
//     layui.use(['form'], function(){
//         var form1 = layui.form;
//         form1.render();
//         form1.on('select(boardFilter)', function(data){
//             console.log(data.value,"选中");
//             var shipName = data.value;
//             if (shipName=="all") {
//                 //调用全部船只
//                 getValue();
//             }else{
//                 // 调用单船数据
//                 getSingleValue(shipName);
//             }
//
//         });
//     })
// }
// getShipList()



function getShipList() {
    map.clearOverlays();
    $(document).ready(function () {
            // $("select[name=list]").empty();
            $.ajax({
                url: "/ship/getAllShipName",
                type: "POST",
                async: true,
                dataType: 'json',
                traditional: true,
                success: function (res) {
                    // alert(data);
                    console.log(res, "DDDD");
                    var opt = "<option value='all' selected = \'selected\'>全部</option>";
                    $("select[name=list]").append(opt);
                    // 默认选中全部,调取全部船只
                    getValue();
                    var beanList = res;
                    var selectNext = $("#list");
                    for (var i = 0; i < beanList.length; i++) {
                        selectNext.append("<option value=" + beanList[i] + ">" + beanList[i] + "</option>");
                    }
                    //渲染option List, 选择船只触发ajax
                    layui.use(['form'], function(){
                        var form1 = layui.form;
                        form1.render();
                        form1.on('select(boardFilter)', function(data){
                            console.log(data.value,"选中");
                            var shipName = data.value;
                            if (shipName=="all") {
                                //调用全部船只
                                getValue();
                            }else{
                                // 调用单船数据
                                getSingleValue(shipName);
                            }

                        });
                    })
                }
            });
        });
    // });
}
getShipList()

//获取单船数据
function getSingleValue(shipName){

    // 地图清除
    map.clearOverlays();

    $.ajax({
        url: "/ship/getShipLocationByShipName",
        type: "POST",
        async:true,
        data:{
            "ship_name":shipName
        },
        dataType: 'json',
        traditional : true,
        success: function(data){
            // alert(data);
            console.log(data);
            var msg = eval("(" + data + ")");
            // alert(msg);
            console.log(msg,"CCCCCC");
            console.log(msg.longitude,msg.latitude);
            // map.panTo(new BMap.Point(113.262232,23.154345));
            map.panTo(new BMap.Point(msg.longitude,msg.latitude),11);
            let resultArr = [];
            // msg.map((item)=>{
            //     resultArr.push([item]);
            resultArr.push([msg]);
            // });
            console.log(resultArr);

            if (resultArr) {
                var pointsArr = resultArr;
                showMarker(pointsArr)
            }
        },
        error:function(errorMsg){
        }
    });
}
// getValue();


//index默认显示船只末点
function getValue(){
    //清除覆盖物
    map.clearOverlays();
    // 重定位到地图中心
    map.panTo(new BMap.Point(121.402584,38.301808),10);
    $.ajax({
        url: "/ship/index",
        type: "POST",
        async:true,
        data:"",
        dataType: 'json',
        traditional : true,
        success: function(data){
            // alert(data);
            console.log(data);
            var msg = eval("(" + data + ")");
            // alert(msg);
            console.log(msg);
            let resultArr = [];
            msg.map((item)=>{
                resultArr.push([item]);
             });
            console.log(resultArr);
            // console.log(resultArr[0][0].longitude);
            // result = msg;
            if (resultArr) {
                var pointsArr = resultArr;
                // showPolyLine(pointsArr)
                showMarker(pointsArr)
            }
        },
        error:function(errorMsg){
        }
    });
}
// getValue();
//获取单船详情
function getDetail(content){
    $.ajax({
        url: "/ship/detail",
        type: "POST",
        async:true,
        data:{
            "pk":content
        },
        dataType: 'json',
        traditional : true,
        success: function(data){
            // alert(data);
            console.log(data);
            var msg = eval("(" + data + ")");
            // alert(msg);
            console.log(msg,"AAAA");
            if (msg) {
                var pointDetail = msg;
                showDetail(pointDetail);
            }
        },
        error:function(errorMsg){
        }
    });
}
// getDetail();
//获取单船轨迹
function getLines(mmsi,starttime,endtime){
    $.ajax({
        url: "/ship/histortrack",
        type: "POST",
        async:true,
        data:{
            "mmsi"     : mmsi,
            "starttime": starttime,
            "endtime"  : endtime
        },
        dataType: 'json',
        traditional : true,
        success: function(data){
            // alert(data);
            console.log(data);
            var msg = eval("(" + data + ")");
            // alert(msg);
            console.log(msg,"lines");
            if (msg.length == 0){
                // alert("暂未查询到轨迹")
                layer.open({
                    title:false,
                    closeBtn: 0,
                    time: 2000,
                    content:  '<div style="padding: 20px 30px;font-size:20px">暂未查询到轨迹</div>',
                    btn: '关闭',
                    btnAlign: 'c' //按钮居中
                });
            }else{
                let resultArr = [];
                msg.map((item)=>{
                    resultArr.push([item]);
                });
                console.log(resultArr);
                if (resultArr) {
                    var pointsArr = resultArr;
                    // showMarker(pointsArr);
                    showPolyLine(pointsArr);

                }
            }

        },
        error:function(errorMsg){
        }
    });
}

// 地图相应屏幕缩放
var mapContainer = document.getElementById("allmap");
function resizeMapContainer () {
    console.log(window.innerHeight);
    mapContainer.style.height = window.innerHeight +'px';
    console.log(mapContainer.style.height);
}
resizeMapContainer();
window.onresize=resizeMapContainer;//浏览器窗口发生变化时同时变化DIV高度


// function showPolyLine(pointsArr, color) {
//划线
function showPolyLine(pointsArr) {
        var pLine = [];
        for (var i = 0; i < pointsArr.length; i++) {
            // pLine.push([]);
            // console.log(pLine,"ppp");
            for (var j = 0; j < pointsArr[i].length; j++) {
                // var marker = new BMap.Marker(new BMap.Point(points[i][j][0], points[i][j][1]));
                // var point = new BMap.Point(pointsArr[i][j][0], pointsArr[i][j][1]);
                var point = new BMap.Point(pointsArr[i][j].longitude, pointsArr[i][j].latitude);
                // alert("AAAA");
                // pLine[i].push(point);
                pLine.push(point);

            }
            if (j == pointsArr[i].length - 1) {//起点终点图标
                map.addOverlay(marker);
            }
            // var polyline = new BMap.Polyline(pLine[i], {
            var polyline = new BMap.Polyline(pLine, {
                strokeColor : "tomato",
                strokeWeight : 1,
                // strokeOpacity : 0.5,
                strokeStyle: "dashed",  //折线的样式，solid或dashed
                // icons:[icons],
                enableMassClear: true,
                enableClicking: true //是否响应点击事件，默认为true
            });
            // console.log(pLine[i],"which");
            map.addOverlay(polyline);
            // console.log(polyline,"which");
        }
}
//打点
function showMarker(pointsArr) {
    /* 标注点, 点击弹出信息窗口 */
    for (var i = 0; i < pointsArr.length; i++) {
        for (var j = 0; j < pointsArr[i].length; j++) {
            // var marker = new BMap.Point(points[i][0], points[i][1]);
            // var marker = new BMap.Marker(new BMap.Point(points[i][0], points[i][1]));
            // var marker = new BMap.Marker(new BMap.Point(pointsArr[i][j][0], pointsArr[i][j][1]));
            // var marker = new BMap.Marker(new BMap.Point(pointsArr[i][j].longitude, pointsArr[i][j].latitude));
            var point = new BMap.Point(pointsArr[i][j].longitude, pointsArr[i][j].latitude); //将标注点转化成地图上的点
            // zPoints.push(point); // 添加到百度坐标数组 用于自动调整缩放级别

            var marker = addMarker(point);
            marker.setRotation(pointsArr[i][j].course); //角度

            var label = new BMap.Label(pointsArr[i][j].shipname, {
                offset : new BMap.Size(30, 8)
            });

            label.setStyle({
                background: 'none',
                color: 'grey',
                fontSize:'0.6px',
                fontWeight:'100',
                border: 'none'//只要对label样式进行设置就可达到在标注图标上显示数字的效果
            });
            marker.setLabel(label);//显示地理名称 a
            // 鼠标经过时
            // marker.addEventListener("mouseover", function(e) {
            //     var label = this.getLabel();
            //     label.setStyle({
            //         color: "red"
            //     });
            // });
            // 点击显示识别
            marker.addEventListener("click", function(e) {
                var label = this.getLabel();
                // alert("MMMM");
                label.setStyle({
                    color: "red",
                    fontWeight:'500',
                });
            });
            // // 鼠标离开时
            // marker.addEventListener("mouseout", function(e) {
            //     var label = this.getLabel();
            //     label.setStyle({
            //         color: "grey"
            //     });
            // });

            // var content = pointsArr[i][j][2];
            // marker.setAnimation(BMAP_ANIMATION_BOUNCE);//跳动
            var content = pointsArr[i][j].pk;
            // console.log(content,"mmsi");
            addInfoWindow(marker, pointsArr[i][j], i);

            // pLine.push(marker);
            // if (i == 0 || i == points.length - 1) {//起点终点图标
            if (j == pointsArr[i].length - 1) {//起点终点图标
                map.addOverlay(marker);
            }
            addClickHandler(content, marker);
        }
    }
}

/**
 *
 * @param pointDetail
 */
console.log(zPoints,"AAAA")
// function setZoom(zPoints) {
//     var view = map.getViewport(eval(zPoints));
//     var mapZoom = view.zoom;
//     var centerPoint = view.center;
//     map.centerAndZoom(centerPoint, mapZoom);
// }
// setTimeout(function () {
//     setZoom(zPoints);
// }, 1000)

// 详情展示
function showDetail(pointDetail) {
    console.log(pointDetail.latitude)

    var poi = pointDetail;
    var mmsi = poi.mmsi;//MMSi
    var ship_name = poi.ship_name;//船名
    var breadth = poi.breadth;//船宽
    var heading = poi.heading;//船艄向
    var mixcars = poi.mixcars;//最大载车数
    var latitude = poi.latitude;//纬度
    var longitude = poi.longitude;//经度
    var mixpeople = poi.mixpeople;//最大载客人数
    var length = poi.length;//船长
    var shiptype = poi.shiptype;//轮船类型
    var unit_name = poi.unit_name;//所属航运企业
    var draught = poi.draught;//吃水
    var course = poi.course;//航向
    var line_name = poi.line_name;//常运航线
    var updatetime = poi.updatetime;//最新更新时间
    // var updateTime = updatetime.split(":");
    // console.log(addres)
    // var  newtime = updateTime[1]

    // var title = '<div style="font-weight:bold;color:#CE5521;font-size:14px">AAAAAA</div>';
    //pop弹窗信息
    var html = [];
    html.push('<table class="layui-table"  cellspacing="0" ' +
        'style="table-layout:fixed;margin:0 !important;color:#5c5f61;' +
        'width:100%;font:10px arial,simsun,sans-serif"><tbody>');
    html.push('<tr>');
    html.push('<td style="vertical-align:top;background-color: #f0f0f0; ;width:20%;">编号</td>');
    html.push('<td id="mmsi" style="vertical-align:top;width:30%; "> '+ mmsi +'</td>');
    html.push('<td style="vertical-align:top;background-color: #f0f0f0; ;width:20%;">船名</td>');
    html.push('<td id="mmsi" style="vertical-align:top;width:30%;  "> '+ ship_name +'</td>');
    html.push('</tr>');
    html.push('<tr>');
    html.push('<td style="vertical-align:top;  ;width:138px;background-color: #f0f0f0;">船宽</td>');
    html.push('<td style="vertical-align:top;width:100px;  "> '+ breadth +' m</td>');
    html.push('<td style="vertical-align:top;  ;width:138px;background-color: #f0f0f0;">船艄向</td>');
    html.push('<td style="vertical-align:top;width:100px;  "> '+ heading +'°</td>');
    html.push('</tr>');
    html.push('<tr>');
    html.push('<td style="vertical-align:top; background-color: #f0f0f0;">最大载车量</td>');
    html.push('<td style="vertical-align:top; "> '+ mixcars +'</td>');
    html.push('<td style="vertical-align:top; background-color: #f0f0f0;">经度</td>');
    html.push('<td style="vertical-align:top; "> '+ Number(longitude).toFixed(6) +'</td>');
    html.push('</tr>');
    html.push('<tr>');
    html.push('<td style="vertical-align:top; background-color: #f0f0f0;">最大载客量</td>');
    html.push('<td style="vertical-align:top;  "> '+ mixpeople +'</td>');
    html.push('<td style="vertical-align:top; background-color: #f0f0f0;">纬度</td>');
    html.push('<td style="vertical-align:top; "> '+ '&nbsp&nbsp' + Number(latitude).toFixed(6) +'</td>');
    html.push('</tr>');
    html.push('<tr>');
    html.push('<td style="vertical-align:top; background-color: #f0f0f0;">船长编号</td>');
    html.push('<td style="vertical-align:top;  "> '+ length +'</td>');
    html.push('<td style="vertical-align:top; background-color: #f0f0f0;">吃水</td>');
    html.push('<td style="vertical-align:top;  "> '+ draught +' m</td>');
    html.push('</tr>');
    html.push('<tr>');
    html.push('<td style="vertical-align:top;  background-color: #f0f0f0;">轮船类型</td>');
    html.push('<td style="vertical-align:top;  "> '+ shiptype +'</td>');
    html.push('<td style="vertical-align:top; background-color: #f0f0f0;">航向</td>');
    html.push('<td style="vertical-align:top;   "> '+ course +'°</td>');
    html.push('</tr>');
    html.push('<tr>');
    html.push('<td style="vertical-align:top;  background-color: #f0f0f0;">航运企业</td>');
    html.push('<td style="vertical-align:top;  "> '+ unit_name +'</td>');
    html.push('<td style="vertical-align:top;  background-color: #f0f0f0;">常运航线</td>');
    html.push('<td style="vertical-align:top;  "> '+ line_name +'</td>');
    html.push('</tr>');
    html.push('</tbody></table>');

    html.push('<table  class="layui-table" cellspacing="0" style="table-layout:fixed;margin:0 !important;' +
        'color:#5c5f61;width:100%;font:10px arial,simsun,sans-serif"><tbody>');
    html.push('<tr>');
    html.push('<td style="vertical-align:top; width:20%;background-color: #f0f0f0;">更新时间</td>');
    html.push('<td style="vertical-align:top;width:80%;color:red  "> '+ updatetime +'</td>');
    html.push('</tr>');
    html.push('</tbody></table>');


    // html.push('<input id="Button1" type="button" value="Open" style="vertical-align:top;  ;width:50%;white-space:nowrap;word-break:keep-all" onclick="return devOpen()"/>' +
    //     '<input id="Button1" type="button" value="Close" style="vertical-align:top;color:red; ;width:50%;white-space:nowrap;word-break:keep-all" onclick="return devClose()"/>');
    html.push('<div style="margin:10px 0">');
    html.push('<input id="dateStart" class="layui-input" type="text"  style="width:32%;display:inline-block;"/>' +'--'+'' +
              '<input id="dateEnd" class="layui-input" type="text" style="width:32%;display:inline-block;"/>'
    );
    html.push('<input id="submit" type="button"  class="layui-btn" style="position:absolute;width:30%;background-color: #03A9F4;" value="轨迹查询" onclick="linesOpen()">');
    html.push('</div>');

// class="layui-input"

    layer.open({
        title:false,
        title:'详情',
        // closeBtn: 0,
        // offset: 'rt',
        area: ['503px', '462px'],
        // area: 'auto',
        content: html.join(""),
        btn: '隐藏窗口',
        yes: function(index, layero){
            //do something
            // devClose();
            layer.close(index); //如果设定了yes回调，需进行手工关闭
        },
        cancel: function(index, layero){
            // if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
            //调用关闭
            devClose();
            layer.close(index)

        }
    });
    laydate.render({
        elem: '#dateStart', //指定元素
        // show: true,
        // value: new Date(1534766888000),
        value: new Date( Date.parse(new Date())-86400000),//24小时时段
        trigger:'click',//默认为click，即点击后出现日历框
        type: 'datetime',
        min: -7, //7天前
        max: 0,
        theme: '#0094fe',
        calendar: true
    });
    laydate.render({
        elem: '#dateEnd', //指定元素
        value: new Date( Date.parse(new Date())),
        type: 'datetime',
        min: -7, //7天前
        max: 0,
        theme: '#0094fe',
        calendar: true
    });

}

// // 添加图标标注
function addMarker(point) {
    var myIcon = new BMap.Icon(
        // "./static/img/ship.png",
        "./static/img/ship1.svg",
        new BMap.Size(30, 40),{
            offset: new BMap.Size(0, 0), // 指定定位位置
            // rotation:
        }
    );
    // var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png",
    //     new BMap.Size(2, 2), {
    //     offset: new BMap.Size(1, 2), // 指定定位位置
    //     imageOffset: new BMap.Size(1, 0 - 10 * 25) // 设置图片偏移
    // });
    var marker = new BMap.Marker(point, { icon: myIcon });
    map.addOverlay(marker);
    return marker;
}

function addClickHandler(content,marker){
    marker.addEventListener("click",function(e){
            // openInfo(content,e);
        // alert("dianji")
        console.log(marker,content,"dian")
        getDetail(content);

        }
    );
}
//添加信息窗口
function addInfoWindow(marker, poi) {
    //pop弹窗标题
    // console.log(poi,"poi")
    // var opts = {
    //     width:250,
    //     height:400,
    //     // offset:{width:200,height:0},
    //     title:"信息窗口",
    //     enableMessage:true //设置允许信息发送信息
    // };
    // var infoWindow = new BMap.InfoWindow(html.join(""), { title: title, width: 400 });
    // var infoWindow = new BMap.InfoWindow(html.join(""), opts);
    var infoWindow = new BMap.InfoWindow();
    var openInfoWinFun = function () {
        // marker.openInfoWindow(infoWindow); //打开默认信息框

        // var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat + 0.005);
        // var point = new BMap.Point(123.166425,39.066987);
        // console.log(point)
        // marker.openInfoWindow(infoWindow,point);
    };
    marker.addEventListener("click", openInfoWinFun);
    return openInfoWinFun;
}

function linesOpen() {
    // alert("open guiji");
    // showPolyLine();
    // showBox();
    var mmsi = $("#mmsi").text();
    var starttime = $("#dateStart").val();
    var endtime = $("#dateEnd").val();
    console.log(mmsi,starttime,endtime,"开始");
    // alert("kaishi")
    getLines(mmsi,starttime,endtime);
}
function devClose() {
    // alert("Close guiji");
    // showPolyLine("", "red");
    // hidePolyLine(points, "red");
    // var points = "";
    // showPolyLine("", "red");
    // showPolyLine(points, "#b3d6f8");
    // map.removeOverlay(polyline);//一次移除一个指定覆盖物
    // map.removeOverlay(showPolyLine);//一次移除一个指定覆盖物

    // map.addOverlay(showPolyLine);
    // map.disableMassClear(marker);

    // map.removeOverlay(line);
    var val1 = $('#list').val();
    var val2 = $('#list option:selected').val();
    console.log(val1,val2)
    if(val1=="all"){
        map.clearOverlays();
        getValue();
    }

    // getValue();

    // map.removeOverlay(Polyline);
    // map.removeOverlay(points);
    // map.removeOverlay(ListMarkers[i]);
    // map.clearOverlays()这个是清除所有
    // map.removeOverlay();//一次移除一个指定覆盖物
}