-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmap2.html
145 lines (139 loc) · 4.54 KB
/
map2.html
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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=oWqkc8Y6FmbVjkfoACSf4sxDHCG9prf4"></script>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.405, 39.930);
map.centerAndZoom(point, 15);
map.addControl(new BMap.NavigationControl());
map.enableScrollWheelZoom();
var myP1 = new BMap.Point(116.425,39.93936); //起点
var myP2 = new BMap.Point(116.435,39.920); //终点
var marker_1 = new BMap.Marker(myP1)
map.addOverlay(marker_1)
console.log(marker_1)
var myIcon = new BMap.Icon('./4.png',new BMap.Size(268,111)) //设置车辆的标志
var marker = new BMap.Marker(myP1,{icon:myIcon})
map.addOverlay(marker)
// playLine(myP1,myP2)
// console.log(marker)
/**
*小车移动
*@param {Point} prvePoint 开始坐标(PrvePoint)
*@param {Point} newPoint 目标点坐标
*@param {Function} 动画效果
*@return 无返回值
*/
var Move = function(prvePoint, newPoint, marker){
// 当前帧数
var currentCount = 0
// _当前的坐标,把球面坐标坐标转化为平面坐标
var _prvePoint = map.getMapType().getProjection().lngLatToPoint(prvePoint)
// _终点的坐标,把球面坐标坐标转化为平面坐标
var _newPoint = map.getMapType().getProjection().lngLatToPoint(newPoint)
console.log('起始点的球面坐标',_prvePoint)
console.log('终点点的球面坐标',_newPoint)
// 运行的状态
var runTime = 10000
// 每隔多长时间执行一次
var intervalTimer = 16.7
// 两点之间要循环定位的次数
var count = runTime / intervalTimer
//设置定时器
var timer = null
console.log(myP2)
timer = setInterval(function(){
// 防止便利完后maker不在了
if (currentCount > count) {
clearInterval(timer)
marker.setPosition(myP2)
return
}else {
currentCount++
var x = linear(_prvePoint.x, _newPoint.x, currentCount, count),
y = linear(_prvePoint.y, _newPoint.y, currentCount, count);
}
var pos = map.getMapType().getProjection().pointToLngLat(new BMap.Pixel(x, y))
//设置marker角度(两点之间的距离车的角度保持一致)
if (currentCount == 1) {
//转换角度
setRotation(prvePoint,newPoint,marker)
}
//最后一次的pos等于0
marker.setPosition(pos)
},intervalTimer)
/*
*缓动效果
*初始坐标，目标坐标，当前的步长，总的步长
*@param{BMap.Pixel} initPos 初始平面坐标
*@parm{BMap.Pixel} targetPos 目标平面坐标
*@param{number} 当前帧数
*@param {number} count 总帧数
*/
var linear = function (initPos, targetPos, currentCount, count) {
var b = initPos,
c = targetPos - initPos,
t = currentCount,
d = count;
return c * t / d + b;
}
/**
*在每个点的真实步骤中设置小车转动的角度
*@param{BMap.Point} curPos 起点
*@param{BMap.Point} targetPos 终点
*/
function setRotation(curPos, targetPos,marker){
var deg = 0
curPos = map.pointToPixel(curPos)
targetPos = map.pointToPixel(targetPos)
if (targetPos.x != curPos.x) {
var tan = (targetPos.y - curPos.y) / (targetPos.x - curPos.x),
atan = Math.atan(tan);
deg = atan * 360 / (2 * Math.PI);
if (targetPos.x < curPos.x) {
deg = -deg + 90 + 90;
} else {
deg = -deg;
}
deg = -20+deg
console.log('不等于的时候',deg)
console.log('起点x',curPos.x)
console.log('起点y',curPos.y)
console.log('终点x',targetPos.x)
console.log('终点y',targetPos.y)
marker.setRotation(-deg);
} else {
var disy = targetPos.y - curPos.y;
var bias = 0;
if (disy > 0)
bias = -1
else
bias = 1
marker.setRotation(-bias * 90);
console.log('等于的时候',deg)
}
}
}
Move(myP1, myP2,marker)
function playLine(start, end) {
var polyline = new BMap.Polyline([
start, end
],{
strokeColor: '#8B4726 ',
strokeWeight: 3,
strokeOpacity: 0.5
})
map.addOverlay(polyline)
}
</script>