| | |
| | | <div class="row row-lg"> |
| | | <div class="col-sm-12"> |
| | | |
| | | <input hidden id="startLng" value="${startLng}"> |
| | | <input hidden id="startLat" value="${startLat}"> |
| | | <input hidden id="endLng" value="${endLng}"> |
| | | <input hidden id="endLat" value="${endLat}"> |
| | | |
| | | <hr/> |
| | | <div class="initialLevel col-sm-12 control-label form-group" > |
| | | <div style="background-color: gray;height: 35px;line-height: 35px"> |
| | |
| | | </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> |
| | | </div> |
| | | <hr/> |
| | | |
| | | <div class="initialLevel col-sm-12 control-label form-group" > |
| | | <div id="container" ></div> |
| | | <div id="panel" ></div> |
| | | </div> |
| | | @} |
| | | |
| | | <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> |
| | | </div> |
| | | <hr/> |
| | | |
| | | <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()" /> |
| | | </div> |
| | |
| | | </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://webapi.amap.com/loader.js"></script> |
| | | |
| | | <style type="text/css"> |
| | | #container { |
| | | background-color: white; |
| | | height: 420px; |
| | | width: 1200px; |
| | | } |
| | | #audio { |
| | | height: 100px; |
| | | width: 600px; |
| | | } |
| | | #panel { |
| | | position: fixed; |
| | | background-color: white; |
| | | max-height: 90%; |
| | | overflow-y: auto; |
| | | top: 10px; |
| | | right: 10px; |
| | | width: 280px; |
| | | } |
| | | #panel .amap-call { |
| | | background-color: #009cf9; |
| | | border-top-left-radius: 4px; |
| | | border-top-right-radius: 4px; |
| | | } |
| | | #panel .amap-lib-driving { |
| | | border-bottom-left-radius: 4px; |
| | | border-bottom-right-radius: 4px; |
| | | overflow: hidden; |
| | | } |
| | | </style> |
| | | <script type="text/javascript"> |
| | | window._AMapSecurityConfig = { |
| | | securityJsCode:'b62d9146929db08c4c2f4537d045320d', |
| | | }; |
| | | laydate.render({ |
| | | elem: '#createTime', |
| | | 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插件 |
| | | }, |
| | | "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) |
| | | } |
| | | }); |
| | | }).catch((e)=>{ |
| | | console.error(e); //加载错误提示 |
| | | }); |
| | | }else { |
| | | Feng.info('该订单未完成,无地图路线显示!') |
| | | } |
| | | |
| | | |
| | | </script> |
| | | @} |