smj_7038
/
MESProductionWeb


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245
							<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>轨迹回放</title>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main.css" />

<link href="~/Content/js/laydate/theme/default/laydate.css" rel="stylesheet" />
<link href="~/Content/js/layui/css/layui.css" rel="stylesheet" />
<script src="http://webapi.amap.com/maps?v=1.3&key=fa36ec6323075f37020083ceffe8eb24"></script>
<script src="~/Content/js/jquery/jquery-1.8.2.min.js"></script>
<script src="~/Content/js/layui/layui.js"></script>
<script src="~/Content/js/laydate/laydate.js"></script>
<style>
    #mapContainer {
        height: 88%;
        width: 98%;
        margin: 5px auto;
        position: relative;
        border: 2px solid rgb(255,255,255)
    }

    .circle {
        border-radius: 50%;
        width: 200px;
        height: 200px;
        /* 宽度和高度需要相等 */
    }

    #button1 {
        width: 100px;
        height: 30px;
        font-size: 18px;
        font-family: 微软雅黑;
        letter-spacing: 8px;
        padding-left: 12px;
        border-radius: 5px;
        background: -webkit-linear-gradient(top, #66B5E6, #2e88c0);
        background: -moz-linear-gradient(top, #66B5E6, #2e88c0);
        background: linear-gradient(top, #66B5E6, #2e88c0);
        background: -ms-linear-gradient(top, #66B5E6, #2e88c0);
        border: 1px solid #2576A8;
        box-shadow: 0 1px 2px #B8DCF1 inset, 0 -1px 0 #316F96 inset;
        color: #fff;
        text-shadow: 1px 1px 0.5px #22629B;
    }

        #button1:hover {
            background: -webkit-linear-gradient(top, #8DC9EF, #4E9FD1);
            background: -moz-linear-gradient(top, #8DC9EF, #4E9FD1);
            background: linear-gradient(top, #8DC9EF, #4E9FD1);
            background: -ms-linear-gradient(top, #8DC9EF, #4E9FD1);
        }

    .form-control {
        width: 30%;
        height: 34px;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.428571429;
        color: #555555;
        vertical-align: middle;
        background-color: #ffffff;
        border: 1px solid #cccccc;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    }

        .form-control:focus {
            border-color: #66afe9;
            outline: 0;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
        }
</style>
<body class="bg">
    <div class="main_layout">
        <!-- 标题 -->
        <div class="title">
            <form>
                <label>起始时间：</label>
                <input id="startdate" class="form-control" type="text" />
                <label>结束时间：</label>
                <input id="enddate" class="form-control" type="text" />
                <input type="button" id="button1" class="btn" value="搜索">
            </form>
        </div>
        <!-- 地图 -->
        <div id="mapContainer"></div>
    </div>
    <script>
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            //日期时间选择器
            laydate.render({
                elem: '#startdate'
                , type: 'datetime'
            });
            //日期时间选择器
            laydate.render({
                elem: '#enddate'
                , type: 'datetime'
            });

        });
        var map; var urlstr = "http://" + window.location.host + "/";
        $(function () {
            init();
            getAjax("","", "@ViewData["carid"]","");
            //绑定事件
            $(".title input[type='button']").click(submitSerch);
        });
        var submitSerch = function () {
            var reg = /^([0-9]|[\-])*$/;
            var start = $("#startdate").val().trim();
            var end = $("#enddate").val().trim();
            var name = "@ViewData["carid"]";
            //var ehr = $(".ehr").val().trim();
            debugger;
            if (start) {
                getAjax(start, end, name, "");
            }
        };
        function getAjax(start, end, name, ehr) {
            $.ajax({
                url: urlstr + "sys/Account/getVehicleTrajectory?start=" + start + "&end=" + end + "&carid=" + name,
                type: "get",
                dataType: "json",
                success: function (data) {
                    //debugger;
                    //alert(data);
                    //初始化请求
                    if (data != null && data.status == 1) {
                        var result = data.result;
                        if (result.length == 0) {
                            alert("抱歉，当前没有行车轨迹记录！");
                        }
                        //清楚显示
                        map.clearMap();
                        line(result);
                       // addMarker(result);
                    } else {
                        alert("没有行车轨迹记录");
                    }
                },
            });

        }

        function init() {
            //创建地图对象
            map = new AMap.Map("mapContainer", {
                resizeEnable: true,
                zoom: 7,
                mapStyle: "light"
            });

            //加载缩放条事件
            map.plugin(["AMap.ToolBar"], function () {
                toolBar = new AMap.ToolBar();
                map.addControl(toolBar);

            });

        }

        function line(data) {
            var lineArr = new Array();
            $.each(data, function (index, value) {
                //debugger;
                //var array = (value.position).split(",");
                //lineArr.push(new AMap.LngLat(parseFloat(array[1]), parseFloat(array[0])));

                //var array = (value.position).split(",");

                //加上带有时间的图标标记
                //var marker_jz = new AMap.Marker({
                //    map: map,
                //    //content: '<div class=\"circle\"></div>', //
                //    content: '<div class=\"maplocation_red\">' + (index + 1) + '</div>',
                //    position: new AMap.LngLat(value.lng, value.lat),
                //    offset: new AMap.Pixel(-3, -3) //相对于基点的位置
                //});

                lineArr.push(new AMap.LngLat(parseFloat(value.lng), parseFloat(value.lat)));

            });

            // 绘制轨迹
            var polyline = new AMap.Polyline({
                map: map,
                path: lineArr,
                strokeColor: "rgb(104,180,255)",  //线颜色
                strokeOpacity: 1,     //线透明度
                strokeWeight: 2,      //线宽
                strokeStyle: "solid", //线样式
                geodesic: true
            });
            map.setFitView();

        }
        function addMarker(data) {
            $.each(data, function (index, value) {
                //var array = (value.position).split(",");
                var p0 = parseFloat(value.lng);
                var p1 = parseFloat(value.lat);
                var action = "AMAP_ANIMATION_DROP";
                var point = new AMap.LngLat(p0, p1);
                var marker = new AMap.Marker({
                    id: index,
                    map: map,
                    position: point,
                    //icon: urlstr + "Content/map/tlj.png",
                    autoRotation: true,
                    animation: action
                });
                createInfoWindow(value, marker);

            });
        }
        function createInfoWindow(value, marker) {
            var info = [];
            /* info.push("<a href='/emplpyer/task/get/"+value.id+"' target='main'  ><div style='font-weight:bold;color:#000;font-family:'微软雅黑';text-align:center;font-size:'><div><img src='http://wiscc6911.qnoddns.org.cn:8400/file/web/download/10143.jpg' width='80' height='80'> "); */
            info.push("经纬度: " + value.lng + "," + value.lat + "");
            info.push("时间 : " + value.taskTime + "");
            //info.push("地址 :" + value.taskAddress + "</div></div></a>");

            var iw = new AMap.InfoWindow({
                content: info.join("<br>"),
                offset: new AMap.Pixel(0, -25),
                isCustom: false,
                autoMove: true
            });

            AMap.event.addListener(marker, "mouseover", function (e) {
                iw.open(map, marker.getPosition());
            });
        }


    </script>
</body>
</html>