weilaibike
/
weilaibike-yunwei-map


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264
							<!doctype html>
<html>

<head>
    <base href="//webapi.amap.com/ui/1.0/ui/misc/PathSimplifier/examples/" />
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <link rel="stylesheet" href="https://trace.weilaibike.com/js/lCalendar.css" />
    <!-- <link rel="stylesheet" href="css/lCalendar.css"> -->
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/qs/6.9.3/qs.min.js"></script>

    <title>车辆位置</title>
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
        }

        #container {
            position: relative;
        }

        .date {
            width: 100%;
            position: absolute;
            top: 5%;
            left: 0;
            z-index: 9999;
        }

        .dateCon {
            width: 80%;
            height: 112px;
            margin: 0 auto;
            background: #fff;
            border-radius: 10px;
        }

        .dateCon div {
            padding: 8px 15px;
        }

        .dateCon input {
            /* background:#f00; */
            width: 150px;
            outline: none;
            border: none;
            padding: 0;
            height: 15px;
            cursor: pointer
        }

        .button {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .button span {
            display: inline-block;
            background: #18d5b9;
            color: #fff;
            padding: 5px 30px;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <div id="container">
        <div id="app">
            <div class="date">
                <div class="dateCon">
                    <div>
                        <span>
                            <span>开始时间：</span>
                            <input class="start" id="demo1" type="text" placeholder="选择开始时间" ref="demo1" readonly>
                        </span>
                    </div>
                    <div>
                        <span>结束时间：</span>
                        <input class="end" type="text" id="demo2" placeholder="选择结束时间" ref="demo2" readonly>
                    </div>
                    <div class="button">
                        <span @click="getPosition">显示轨迹</span>
                        <span>清除轨迹</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 加载地图JSAPI脚本 -->
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=bd75d5583e6e04663da170715ff52b3d"></script>
    <script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
    <script src="https://trace.weilaibike.com/js/datePicker.js"></script>
    <script src="https://trace.weilaibike.com/js/jquery-1.4.2.min.js"></script>
    <script src="https://trace.weilaibike.com/js/lCalendar.js"></script>
    <!-- <script src="http://resource.weilaibike.com/yunwei/datePicker.js"></script> -->

    <script>
        $(function () {
            var calendardatetime = new lCalendar();
            calendardatetime.init({
                'trigger': '#demo1',
                'type': 'datetime'
            });
            var calendardatetime = new lCalendar();
            calendardatetime.init({
                'trigger': '#demo2',
                'type': 'datetime'
            });
        });
    </script>
    <script>
        var map = new AMap.Map('container', {
            resizeEnable: true, //是否监控地图容器尺寸变化
            zoom: 4, //初始化地图层级
            center: [113.78620466447434, 34.78300092508428] //初始化地图中心点
        });

        var vm = new Vue({
            el: "#app", //找到并扫面和监控#app下的所有内容
            data: {
                pathDataTimes: '',
                token: '',
                bike_no: '',
                startTime: '',
                endTime: '',
                pathDate: []
            },
            created() {
                let that = this;
                // var url = "https://trace.weilaibike.com/trackTest.html?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9hZG1pbi53ZWlsYWliaWtlLmRldi5oYW55aXl1bi5jb21cL2FwcC1hcGlcL2F1dGhcL2xvZ2luIiwiaWF0IjoxNTg2MzM2MTUxLCJleHAiOjE1ODY1MDg5NTEsIm5iZiI6MTU4NjMzNjE1MSwianRpIjoiOEx2WTdBWFhRQlBhUEE1MyIsInN1YiI6MSwicHJ2IjoiYzgyOTIyMzgzNWQxMTEzOGYwOGFjZTU2ZmZhNjYyOGJjMjY4M2NiNSJ9.6R8WlEsBhsYq_NPqmT4D6p4s5JgTH2mRN51_7kRA8XE&&bike_no=10010010044&&startTime=2020-04-01 16:19&&endTime=2020-04-09 16:19"
                var url = window.location.href; /*获取url里"?"后面的值*/
                var temp1 = url.split('?');
                var pram = temp1[1];
                var keyValue = pram.split('&&');
                var obj = {};
                for (var i = 0; i < keyValue.length; i++) {
                    var item = keyValue[i].split('=');
                    var key = item[0];
                    var value = item[1];
                    obj[key] = value;
                }
                that.token = obj.token;
                that.bike_no = obj.bike_no;
                that.startTime = obj.startTime;
                that.endTime = obj.endTime
                console.log(typeof (obj.startTime));
                console.log(typeof (obj.bike_no));
                console.log(typeof (obj.endTime));
                console.log(typeof (obj.token));


                // var url = window.location.href.split("?")[1]; /*获取url里"?"后面的值*/
                // if (url) { /*判断是否是一个参数还是多个参数*/
                //     url = url.split("=")
                //     that.token = url1
                //     return url[1]; /*返回想要的参数值*/
                // } else {
                //     return '';
                // }

                // let account = "admin";
                // let password = "123abc"
                // axios.post("https://admin.weilaibike.dev.hanyiyun.com/app-api/auth/login",Qs.stringify({account,password})).then(res=>{
                //     console.log(res);
                //     that.token = res.data.token
                // })
                // this.getTrack();
                this.getPosition();
            },
            methods: {
                getPosition() {
                    console.log(this.$refs.demo1.value)
                    alert(1)
                    let that = this;
                    let token = that.token;

                    let data = {
                        token: that.token,
                        bike_no: that.bike_no,
                        'time_between[0]': that.startTime,
                        ' time_between[1]': that.endTime,
                    }
                    axios.post("https://admin.weilaibike.com/app-api/bike/bikeLocation", Qs
                        .stringify({
                            token: that.token,
                            bike_no: that.bike_no,
                            'time_between[0]': that.startTime,
                            'time_between[1]': that.endTime,
                        })).then(res => {
                        that.pathData = res.data.locations
                        AMapUI.load(['ui/misc/PathSimplifier'], function (PathSimplifier) {
                            if (!PathSimplifier.supportCanvas) {
                                alert('当前环境不支持 Canvas！');
                                return;
                            }
                            //启动页面
                            initPage(PathSimplifier);
                        });

                        function initPage(PathSimplifier) {
                            let that = this;
                            //创建组件实例
                            var pathSimplifierIns = new PathSimplifier({
                                zIndex: 100,
                                map: map, //所属的地图实例
                                getPath: function (pathData, pathIndex) {
                                    console.log(pathData, 'pathData')
                                    //返回轨迹数据中的节点坐标信息，[AMap.LngLat, AMap.LngLat...] 或者 [[lng|number,lat|number],...]
                                    return pathData.path;
                                },
                                getHoverTitle: function (pathData, pathIndex, pointIndex) {
                                    //返回鼠标悬停时显示的信息
                                    if (pointIndex >= 0) {
                                        console.log(pointIndex, 'pointIndex')
                                        //鼠标悬停在某个轨迹节点上
                                        return pathData.name + '，点:' + pointIndex + '/' +
                                            pathData.path.length + ',时间：';
                                    }
                                    //鼠标悬停在节点之间的连线上
                                    return pathData.name + '，点数量' + pathData.path.length;
                                },
                                renderOptions: {
                                    //轨迹线的样式
                                    pathLineStyle: {
                                        strokeStyle: 'red',
                                        lineWidth: 6,
                                        dirArrowStyle: true
                                    },
                                    renderAllPointsIfNumberBelow: 100,
                                }
                            });
                            //这里构建两条简单的轨迹，仅作示例
                            pathSimplifierIns.setData([{
                                    name: '轨迹',
                                    path: res.data.locations
                                },

                            ]);
                            //创建一个巡航器
                            var navg0 = pathSimplifierIns.createPathNavigator(0, //关联第1条轨迹
                                {
                                    loop: true, //循环播放
                                    speed: 500
                                });
                            navg0.start();
                        }

                    })
                },
            },
        })
    </script>
</body>

</html>