198 lines
7.3 KiB
HTML
198 lines
7.3 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="../js/jquery-1.11.3.js"></script>
|
||
<script src="../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(){
|
||
var obj=GetRequest();
|
||
cph=decodeURI(obj.cph);
|
||
getdata(cph,reservation);
|
||
}
|
||
|
||
// var reservation = '';
|
||
function getdata(cph,reservation) {
|
||
$.ajax({
|
||
dataType: "json",
|
||
type: "post",
|
||
url: "http://zhyq.toommi.com/api/Index/apppost",
|
||
data: {
|
||
action:'Screen/vehicle_history',
|
||
vehicleNo:cph,
|
||
reservation:reservation,
|
||
},
|
||
success: function(res) {
|
||
if(res.code==200){
|
||
// str = res.data;
|
||
if (res.data.coordinate == '106.964108,29.793287'){
|
||
alert('当天未查询到该车轨迹，请重新选择日期');
|
||
}
|
||
history(res.data.coordinate);
|
||
}
|
||
},
|
||
error: function(res) {
|
||
|
||
}
|
||
});
|
||
}
|
||
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>
|