speedingMap.html
2.73 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<style>
.play_back-layer .layui-layer-title{
height: 36px;
border-bottom: none;
}
</style>
<div id="titleMap">
<button id="run" style="margin-left:10px" class="btn btn-sm green btn-outline filter-submit margin-bottom">运行</button>
</div>
<div id="speedingMap">
</div>
<style type="text/css">
#speedingMap{
width: 100%;
border: 2px solid #fdfdfd;
height: calc(100% - 30px);
overflow: hidden;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=IGGrr4UjwIYzatoCRFKEL8sT"></script>
<script type="text/javascript" src="/pages/excep/js/speeding-map.js"></script>
<script type="text/javascript">
$(function(){
var dataArr = window.localStorage.zbhAndDate.split(",");//获取页面传递过来的车辆自编号以及超速起始时间和超速结束时间
var vehicle = dataArr[0];
var startdate = dataArr[1];
var enddate = dataArr[2];
var lon = dataArr[3];//起点经度
var lat = dataArr[4];//起点纬度
var endLon = dataArr[5];//终点经度
var endLat = dataArr[6];//终点纬度
var Points = [];
$.ajax({
type: "GET",
async:false,
url: '/gps/findPosition',
data: {vehicle:vehicle,startdate:startdate,enddate:enddate},
success: function(data){
console.log("123"+data);
$.each(data,function(i,item){
console.log(item);
if(item.lon>1 && item.lat>1){
var point = new BMap.Point(item.lon,item.lat);
Points.push(point);
}
});
}
});
setTimeout(function(){
var map = SpeedingMap.init();//创建地图
var myP1 = new BMap.Point(lon,lat); //起点
var myP2 = new BMap.Point(endLon,endLat); //终点
map.centerAndZoom(myP1,18);//地图中心点坐标
console.log(Points);
var polyline = new BMap.Polyline(Points, {strokeColor:"blue", strokeWeight:5, strokeOpacity:0.5}); //创建折线
var myIcon = new BMap.Icon("/pages/excep/img/bus.png", new BMap.Size(32, 70), {//小车图片
imageOffset: new BMap.Size(5,20) //图片的偏移量。为了是图片底部中心对准坐标点。
});
$(document).on('click', '#run', function() {
map.clearOverlays();//清空上一次的轨迹
map.addOverlay(polyline);//增加折线
var paths = Points.length;//获得有几个点
var carMk = new BMap.Marker(Points[0],{icon:myIcon});
map.addOverlay(carMk);
i=0;
function resetMkPoint(i){
carMk.setPosition(Points[i]);
if(i < paths){
setTimeout(function(){
i++;
resetMkPoint(i);
},100);
}
}
setTimeout(function(){
resetMkPoint(0);
},100)
});
});
}, 100);
</script>