修改bug

puzhibing

2023-06-23 353b56200fa196f461902b4608341a0939a7abc2

 management/guns-admin/src/main/webapp/WEB-INF/view/system/tOrder/tOrderDetail.html

@@ -13,6 +13,7 @@
                        <input hidden id="startLat" value="${startLat}">
                        <input hidden id="endLng" value="${endLng}">
                        <input hidden id="endLat" value="${endLat}">
                        <input hidden id="id" value="${id}">

                        <hr/>
                        <div class="initialLevel col-sm-12 control-label form-group"  >
@@ -179,20 +180,28 @@
                            </div>
                        @}

                        @if(startLng != null){
                            <hr/>
                            <div class="initialLevel col-sm-12 control-label form-group"  >
                                <div style="background-color: gray;height: 35px;line-height: 35px">
                                    <label style="color: #0C0C0C">行程轨迹</label>
                        <div class="row" style="margin-top: 30px;">
                            <div class="col-sm-4">
                                <h2 class="h3Class" style="font-weight: 700;">线路轨迹</h2>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-10">
                                <div class="form-horizontal" id="container" style="margin-left: 50px;width: 100%; height: 500px;"></div>
                                <div class="input-card" style="margin-left: 50px;">
                                    <h4>轨迹回放控制</h4>
                                    <div class="input-item">
                                        <input type="button" class="btn" value="开始动画" id="start" onclick="startAnimation()"/>
                                        <input type="button" class="btn" value="暂停动画" id="pause" onclick="pauseAnimation()"/>
                                        <input type="button" class="btn" value="继续动画" id="resume" onclick="resumeAnimation()"/>
                                        <input type="button" class="btn" value="停止动画" id="stop" onclick="stopAnimation()"/>
                                    </div>
                                    <div class="input-item">

                                    </div>
                                </div>
                            </div>
                            <hr/>

                            <div class="initialLevel col-sm-12 control-label form-group"  >
                                <div id="container" ></div>
                                <div id="panel" ></div>
                            </div>
                        @}
                        </div>

                        <hr/>
                        <div class="initialLevel col-sm-12 control-label form-group"  >
@@ -202,12 +211,14 @@
                        </div>
                        <hr/>

                        @if(routeRecord != null){
                        <div class="initialLevel col-sm-12 control-label form-group"  >
                            <audio id="audio" autoplay controls muted>
<!--                                <source src="http://www.w3capi.com/upload/audio/audio_example.mp3" type="audio/mpeg">-->
                                <source src="${routeRecord}" type="audio/mpeg">
                            </audio>
                        </div>
                        @}


                        <div class="hidden-xs" id="TDriverTableToolbar" role="group"  style="text-align: center">
                            <#button name="取消" icon="fa-plus" clickFun="TOrderInfoDlg.close()" />
@@ -221,10 +232,9 @@
</div>
<script src="${ctxPath}/static/modular/system/tOrder/tOrder.js"></script>
<script src="${ctxPath}/static/modular/system/tOrder/tOrder_info.js"></script>

<!--<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=1d43098bcd98ab124623e7e4bcc9595e&plugin=AMap.Driving"></script>-->
<!--<script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>-->
<!--<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>-->
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=1d43098bcd98ab124623e7e4bcc9595e"></script>
<script src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<script src="https://webapi.amap.com/loader.js"></script>

<style type="text/css">
@@ -266,44 +276,100 @@
        type: 'date',
        range: true
    });
    if(null != $('#startLng').val() && '' != $('#startLng').val()){
        AMapLoader.reset() // 需要把这个reset一下
        AMapLoader.load({
            "key": "1d43098bcd98ab124623e7e4bcc9595e",              // 申请好的Web端开发者Key，首次调用 load 时必填
            "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            "plugins": ['AMap.Driving'],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            "AMapUI": {             // 是否加载 AMapUI，缺省不加载
                "version": '1.1',   // AMapUI 版本
                "plugins":['overlay/SimpleMarker'],       // 需要加载的 AMapUI ui插件
    var map = new AMap.Map("container", {
        resizeEnable: true,
        zoom: 14
    });

    $(function() {
        getTrajectory();
    });
    function getTrajectory() {
        $.ajax({
            url: Feng.ctxPath + '/tOrder/getOrderTrack',
            type: 'POST',
            data:{
                orderDetailId: $("#id").val()
            },
            "Loca":{                // 是否加载 Loca， 缺省不加载
                "version": '2.0'  // Loca 版本
            },
        }).then((AMap)=>{
            //初始化地图对象，加载地图
            var map = new AMap.Map('container', {
                viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
                zoom:13, //初始化地图层级
                center: [$('#startLng').val(), $('#startLat').val()] //初始化地图中心点
            });
            //构造路线导航类
            var driving = new AMap.Driving({
                map: map,
            });
            // 根据起终点经纬度规划驾车导航路线
            driving.search(new AMap.LngLat($('#startLng').val(), $('#startLat').val()), new AMap.LngLat($('#endLng').val(), $('#endLat').val()), function(status, result) {
                // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
                if (status === 'complete') {
                    Feng.success('绘制订单路线完成')
                } else {
                    Feng.error('获取驾车数据失败：' + result)
            success: function (res) {
                if(res.status == 200){
                    var data = res.data;
                    if(data.length > 0){
                        orderTrack(data);
                    }/*else{
                    Feng.error("当前订单没有轨迹");
                }*/
                }else{
                    Feng.error(res.msg);
                }
            });
        }).catch((e)=>{
            console.error(e);  //加载错误提示
            }
        });
    }else {
        Feng.info('该订单未完成,无地图路线显示!')
    }

    var marker, lineArr = [];

    function orderTrack(data) {
        for(var i in data){
            var waypoints = [];
            var lon = parseFloat(data[i].lon);
            var lat = parseFloat(data[i].lat);
            waypoints.push(lon);
            waypoints.push(lat);
            lineArr.push(waypoints);
        }

        marker = new AMap.Marker({
            map: map,
            position: lineArr[0],
            icon: "https://webapi.amap.com/images/car.png",
            offset: new AMap.Pixel(-26, -13),
            autoRotation: true,
            angle:-90,
        });

        // 绘制轨迹
        var polyline = new AMap.Polyline({
            map: map,
            path: lineArr,
            showDir:true,
            strokeColor: "#28F",  //线颜色
            // strokeOpacity: 1,     //线透明度
            strokeWeight: 6,      //线宽
            // strokeStyle: "solid"  //线样式
        });

        var passedPolyline = new AMap.Polyline({
            map: map,
            // path: lineArr,
            strokeColor: "#AF5",  //线颜色
            // strokeOpacity: 1,     //线透明度
            strokeWeight: 6,      //线宽
            // strokeStyle: "solid"  //线样式
        });


        marker.on('moving', function (e) {
            passedPolyline.setPath(e.passedPath);
        });

        map.setFitView();
    }


    function startAnimation () {
        marker.moveAlong(lineArr, 200);
    }

    function pauseAnimation () {
        marker.pauseMove();
    }

    function resumeAnimation () {
        marker.resumeMove();
    }

    function stopAnimation () {
        marker.stopMove();
    }