211 lines
8.0 KiB
HTML
211 lines
8.0 KiB
HTML
|
<!doctype html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<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">
|
|||
|
|
<title>行驶记录</title>
|
|||
|
|
|
|||
|
|
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
|
|||
|
|
<script src="__CDN__/web/static/js/jquery-1.11.3.js" type=text/javascript charset=utf-8></script>
|
|||
|
|
<script src="__CDN__/web/static/js/laydate/laydate.js"></script>
|
|||
|
|
<style>
|
|||
|
|
html, body, #container {
|
|||
|
|
height: 100%;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
.input-card{
|
|||
|
|
top: 1rem;
|
|||
|
|
height:8rem;
|
|||
|
|
right: 3rem;
|
|||
|
|
width: 30rem;
|
|||
|
|
}
|
|||
|
|
.input-card .btn{
|
|||
|
|
margin-right: 1.2rem;
|
|||
|
|
width: 14rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input-card .btn:last-child{
|
|||
|
|
margin-right: 0;
|
|||
|
|
}
|
|||
|
|
.animate{
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 20px;
|
|||
|
|
right: 10px;
|
|||
|
|
}
|
|||
|
|
.animate input{
|
|||
|
|
width: 100px;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div id="container"></div>
|
|||
|
|
<div class="input-card">
|
|||
|
|
<h4>时间筛选（按天查询）</h4>
|
|||
|
|
<input type="text" class="demo-input" placeholder="请选择日期" id="test1">
|
|||
|
|
</div>
|
|||
|
|
<div class="animate">
|
|||
|
|
<div class="input-item">
|
|||
|
|
<input type="button" class="btn" value="开始动画" id="start" onclick="startAnimation(2000)"/>
|
|||
|
|
<input type="button" class="btn" value="暂停动画" id="pause" onclick="pauseAnimation()"/>
|
|||
|
|
<input type="button" class="btn" value="继续动画" id="resume" onclick="resumeAnimation()"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="input-item">
|
|||
|
|
<input type="button" class="btn" value="正常" onclick="startAnimation(2000)"/>
|
|||
|
|
<input type="button" class="btn" value="4倍速" onclick="startAnimation(8000)"/>
|
|||
|
|
<input type="button" class="btn" value="16倍速" onclick="startAnimation(20000)"/>
|
|||
|
|
<!--<input type="button" class="btn" value="停止动画" id="stop" onclick="stopAnimation()"/>-->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<input type="hidden" name="vehicleNo" value="{$vehicleNo}">
|
|||
|
|
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=4a7c7c92504e8d8afa2abf377159280a"></script>
|
|||
|
|
<script>
|
|||
|
|
function GetRequest() {
|
|||
|
|
var url = location.search; //获取url中"?"符后的字串
|
|||
|
|
var theRequest = new Object();
|
|||
|
|
if(url.indexOf("?") != -1) {
|
|||
|
|
var str = url.substr(1);
|
|||
|
|
strs = str.split("&");
|
|||
|
|
for(var i = 0; i < strs.length; i++) {
|
|||
|
|
theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return theRequest;
|
|||
|
|
}
|
|||
|
|
var reservation ='',cph='';
|
|||
|
|
window.onload=function(){
|
|||
|
|
// 优先使用隐藏字段中的 vehicleNo，如果没有则从 URL 参数获取
|
|||
|
|
var vehicleNoFromHidden = $('input[name=vehicleNo]').val();
|
|||
|
|
if (vehicleNoFromHidden) {
|
|||
|
|
cph = vehicleNoFromHidden;
|
|||
|
|
} else {
|
|||
|
|
var obj=GetRequest();
|
|||
|
|
cph=decodeURI(obj.id);
|
|||
|
|
}
|
|||
|
|
getdata(cph,reservation);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// var reservation = '';
|
|||
|
|
function getdata(cph,reservation) {
|
|||
|
|
$.ajax({
|
|||
|
|
dataType: "json",
|
|||
|
|
type: "post",
|
|||
|
|
url: "/api/Yq_screen/vehicle_history",
|
|||
|
|
data: {
|
|||
|
|
action:'Screen/vehicle_history',
|
|||
|
|
vehicleNo:cph,
|
|||
|
|
reservation:reservation,
|
|||
|
|
},
|
|||
|
|
success: function(res) {
|
|||
|
|
if(res.code==1){
|
|||
|
|
// str = res.data;
|
|||
|
|
if (res.data && res.data.coordinate == '106.964108,29.793287'){
|
|||
|
|
alert('当天未查询到该车轨迹，请重新选择日期');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (res.data && res.data.coordinate) {
|
|||
|
|
history(res.data.coordinate);
|
|||
|
|
} else {
|
|||
|
|
alert('当天未查询到该车轨迹，请重新选择日期');
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
alert('查询失败：' + (res.msg || '未知错误'));
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
error: function(res) {
|
|||
|
|
alert('请求失败，请稍后重试');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
var marker= '';
|
|||
|
|
var lineArr='';
|
|||
|
|
function history(info) {
|
|||
|
|
var vehicleNo = $('input[name=vehicleNo]').val();
|
|||
|
|
var reservation = '';
|
|||
|
|
const MAP_KEY = "4a7c7c92504e8d8afa2abf377159280a",
|
|||
|
|
{
|
|||
|
|
LngLat
|
|||
|
|
} = AMap;
|
|||
|
|
// var str="108.01527,29.895601;106.997876,29.89281;106.991391,29.887939;106.985853,29.880405;106.981835,29.871026;106.960543,29.849142;106.950737,29.83564;106.945862,29.824089;106.943563,29.814148;106.945054,29.799754;106.942764,29.783607;106.970332,29.766519;106.983273,29.751322;107.017612,29.737776;107.050425,29.734115;107.064458,29.737683;107.064744,29.739318;107.058942,29.748447;107.055205,29.762378;107.071581,29.77504;107.086248,29.789923;107.088111,29.796775;107.084106,29.807387;107.080959,29.81142;107.068298,29.813474;107.06422,29.813406;107.060435,29.82112;107.050628,29.827207;107.04726,29.828623;107.046543,29.829966;107.04701,29.830878;107.04712,29.834263;107.044827,29.838826;107.053757,29.842875;107.056479,29.849047;107.057124,29.85153;107.056802,29.853468;107.060415,29.86047;107.061665,29.864841;107.054919,29.881592;107.052508,29.894119;107.040451,29.898403;107.028579,29.89536;107.014946,29.895825;106.997804,29.89278";
|
|||
|
|
// var marker1, lineArr1 = [[116.478935,39.997761],[116.478939,39.997825],[116.478912,39.998549],[116.478912,39.998549],[116.478998,39.998555],[116.478998,39.998555],[116.479282,39.99856],[116.479658,39.998528],[116.480151,39.998453],[116.480784,39.998302],[116.480784,39.998302],[116.481149,39.998184],[116.481573,39.997997],[116.481863,39.997846],[116.482072,39.997718],[116.482362,39.997718],[116.483633,39.998935],[116.48367,39.998968],[116.484648,39.999861]];
|
|||
|
|
|
|||
|
|
lineArr = strToLL(info);
|
|||
|
|
lay('#version').html('-v'+ laydate.v);
|
|||
|
|
laydate.render({
|
|||
|
|
elem: '#test1',
|
|||
|
|
min: -4,
|
|||
|
|
max: 0,
|
|||
|
|
// type: 'datetime',
|
|||
|
|
// range: true, //或 range: '~' 来自定义分割字符
|
|||
|
|
done:function(value,date,endDate){
|
|||
|
|
console.log(value); //得到日期生成的值，如：2017-08-18
|
|||
|
|
// reservation=value;
|
|||
|
|
getdata(cph,value);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
var map = new AMap.Map("container", {
|
|||
|
|
resizeEnable: true,
|
|||
|
|
center: lineArr[0],
|
|||
|
|
zoom: 17
|
|||
|
|
});
|
|||
|
|
function strToLL(str) {
|
|||
|
|
return str.split(';').map(i => new LngLat(...i.split(',').map(j => +j)))
|
|||
|
|
}
|
|||
|
|
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 (time=2000) {
|
|||
|
|
marker.moveAlong(lineArr, time);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function pauseAnimation () {
|
|||
|
|
marker.pauseMove();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function resumeAnimation () {
|
|||
|
|
marker.resumeMove();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function stopAnimation () {
|
|||
|
|
marker.stopMove();
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|