From 353b56200fa196f461902b4608341a0939a7abc2 Mon Sep 17 00:00:00 2001
From: puzhibing <393733352@qq.com>
Date: 星期五, 23 六月 2023 11:03:28 +0800
Subject: [PATCH] 修改bug
---
management/guns-admin/src/main/webapp/WEB-INF/view/system/tOrder/tOrderDetail.html | 170 +++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 118 insertions(+), 52 deletions(-)
diff --git a/management/guns-admin/src/main/webapp/WEB-INF/view/system/tOrder/tOrderDetail.html b/management/guns-admin/src/main/webapp/WEB-INF/view/system/tOrder/tOrderDetail.html
index d1cbee6..16dc2d4 100644
--- a/management/guns-admin/src/main/webapp/WEB-INF/view/system/tOrder/tOrderDetail.html
+++ b/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();
}
--
Gitblit v1.7.1