smj_7038
/
MESProductionWeb


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
							<!doctype html>
<html lang="zh-CN">
<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.0/ui/misc/PositionPicker/examples/positionPicker.html -->
    <base href="//webapi.amap.com/ui/1.0/ui/misc/PositionPicker/examples/" />
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>拖拽选址</title>
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
            width: 100%;
            padding: 0;
            overflow: hidden;
            font-size: 13px;
        }

        #container {
            height: 500px;
            width: 500px;
            margin: 0 auto;
        }

        #tip {
            background-color: #fff;
            padding-left: 10px;
            padding-right: 10px;
            position: absolute;
            font-size: 12px;
            right: 10px;
            top: 20px;
            border-radius: 3px;
            border: 1px solid #ccc;
            line-height: 30px;
        }
    </style>
</head>

<body>


    <div id="container" style="height:600px;width: 100%;vertical-align: middle;"></div>
    <div class="button-group">
        <input type="button" class="layui-btn layui-btn-mini layui-btn-normal" value="开始动画" id="move" style="display:none;" />
        <input type="button" class="layui-btn layui-btn-mini layui-btn-normal" value="暂停动画" id="pause" style="display:none;" />
        <input type="button" class="layui-btn layui-btn-mini layui-btn-normal" value="继续动画" id="resume" style="display:none;" />
        <input type="button" class="layui-btn layui-btn-mini layui-btn-normal" value="停止动画" id="stop" style="display:none;" />
    </div>


    <script type="text/javascript" src='//webapi.amap.com/maps?v=1.3&key={$geokey}&plugin=AMap.ToolBar'></script>
    <!-- UI组件库 1.0 -->
    <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.10"></script>
    <script type="text/javascript">
        var postData = {};
        postData['rsearch'] = rsearch;
        postData['uid'] = uid;
        postData['stime'] = stime;
        postData['etime'] = etime;
        postData['ajax'] = 1;
        var url = 'index.php?mod={$mod}&act={$act}&opt={$opt}'; //接口地址

        $.post(url, postData, function (res) {
            if (res.status == 1) {
                console.log(res);
                $("#container").show();
                var lnglatArr = new Array();
                var i = 0;

                $.grep(res.data, function (re) {
                    lnglatArr[i] = new AMap.LngLat(re.longitude, re.latitude);
                    i = i + 1;
                })

                AMap.convertFrom(lnglatArr, 'gps', function (status, result) {
                    console.log(result);

                    var marker, lineArr = [];

                    var map = new AMap.Map("container", {
                        resizeEnable: true,
                        center: [result.locations[0].lng, result.locations[0].lat],
                        zoom: 13
                    });

                    marker = new AMap.Marker({
                        map: map,
                        position: [result.locations[0].lng, result.locations[0].lat],
                        icon: "http://webapi.amap.com/images/car.png",
                        offset: new AMap.Pixel(-26, -13),
                        autoRotation: true
                    });

                    $.grep(result.locations, function (r) {
                        console.log(r);
                        lineArr.push([r.lng, r.lat]);
                    })

                    // 绘制轨迹
                    var polyline = new AMap.Polyline({
                        map: map,
                        path: lineArr,
                        strokeColor: "#00A", //线颜色
                        //strokeOpacity: 1, //线透明度
                        strokeWeight: 3, //线宽
                        //strokeStyle: "solid" //线样式
                    });
                    var passedPolyline = new AMap.Polyline({
                        map: map,
                        //path: lineArr,
                        strokeColor: "#F00", //线颜色
                        //strokeOpacity: 1, //线透明度
                        strokeWeight: 3, //线宽
                        //strokeStyle: "solid" //线样式
                    });
                    $("#move").show();
                    $("#pause").show();
                    $("#resume").show();
                    $("#stop").show();

                    AMapUI.loadUI(['overlay/SimpleInfoWindow'], function (SimpleInfoWindow) {
                        infoWindow = new SimpleInfoWindow({
                            infoTitle: '<strong>标题</strong>',
                            infoBody: '点击开始动画可进行播放',
                            //基点指向marker的头部位置
                            offset: new AMap.Pixel(0, -31)
                        });
                        infoWindow.open(map, marker.getPosition());
                    })

                    marker.on('click', function (e) {
                        infoWindow.open(map, marker.getPosition());
                    });

                    marker.on('moving', function (e) {
                        var len = e.passedPath.length;
                        var rate = res.data[len - 1].rate;
                        var location = e.passedPath[len - 1];
                        var lll = new AMap.LngLat(location.lng, location.lat);

                        infoWindow.setInfoBody('<div>经度：' + location.lng + '<br>纬度：' + location.lat + '<br>速度：' + rate + ' km/h</div>');
                        infoWindow.setPosition(lll);
                        passedPolyline.setPath(e.passedPath);
                    })
                    map.setFitView();

                    AMap.event.addDomListener(document.getElementById('move'), 'click', function () {
                        marker.moveAlong(lineArr, 500, function (k) {
                            return k;
                        });
                    }, false);

                    AMap.event.addDomListener(document.getElementById('pause'), 'click', function () {
                        marker.pauseMove();
                    }, false);
                    AMap.event.addDomListener(document.getElementById('resume'), 'click', function () {
                        marker.resumeMove();
                    }, false);
                    AMap.event.addDomListener(document.getElementById('stop'), 'click', function () {
                        marker.stopMove();
                    }, false);
                });
            } else {
                $("#container").hide();
                $("#move").hide();
                $("#pause").hide();
                $("#resume").hide();
                $("#stop").hide();
                layui.use(['layer'], function () {
                    var layer = layui.layer;
                    layer.msg(res.msg, { icon: 2 });
                });
            }
        }, 'json')
    </script>
</body>

</html>