多点沿线运动的小车可以保持车头沿路的方向
1、引入相关的文件
2、定义一个div 容器
<%@page import="java.util.ArrayList,com.bean.Client"%>
<%@ page language="java" import="java.lang.Math"
contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>MorePointToLushu</title>
<link rel="stylesheet" type="text/css" href="css/map.css">
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="jquery/jquery-ui.css" />
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="jquery/jquery-ui.js"></script>
<script type="text/javascript" src="jquery/jquery-ui-slide.min.js"></script>
<script type="text/javascript"
src="jquery/jquery-ui-timepicker-addon.js"></script>
<script
src="http://api.map.baidu.com/api?v=2.0&ak=srpbYTidksiwvfrsfXa8IHfk"></script>
<script type="text/javascript"
src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="jquery/jquery-ui.js"></script>
<script type="text/javascript" src="jquery/jquery-ui-slide.min.js"></script>
<script type="text/javascript" src="jquery/jquery-1.11.3.js"></script>
<%
Client u = (Client) session.getAttribute("client");
%>
</head>
<body>
<!--地图部分 -->
<div id="map" class="map"></div>
</body>
</html>
<script type="text/javascript">
var carTrackAll = new Array();
var map = new BMap.Map('map');
map.enableScrollWheelZoom();
map.centerAndZoom(new BMap.Point(116.49, 39.88423), 13);
var myIcon = new BMap.Icon("car2.png", new BMap.Size(13, 26), { //小车图片
//offset: new BMap.Size(0, -5), //相当于CSS精灵
imageOffset: new BMap.Size(0, 0) //图片的偏移量。为了是图片底部中心对准坐标点。
});
addLine(116.489997, 39.880001, 116.499997, 39.880001, 10,"京A00001");
function addLine(x1, y1, x2, y2, t,_carid) {
var start_point = new BMap.Point(x1, y1);
var end_point = new BMap.Point(x2, y2);
time = t;
var driving3 = new BMap.DrivingRoute(map, {
onSearchComplete : drawLine
});
driving3.search(start_point, end_point, {}); //发起检索。
}
function drawLine(results) {//results类型:Drivin gRouteResult
var planObj = results.getPlan(0);
//返回索引指定的方案。索引0表示第一条方案。
//planObj为RoutePlan类:此类表示一条驾车或步行出行方案
// 绘制驾车步行线路
for (var i = 0; i < planObj.getNumRoutes(); i++) {//RoutePlan.getNumRoutes()返回方案包含的线路的个数
var route = planObj.getRoute(0);//返回方案中索引指定的线路。索引0表示第一条线路,route为Route类:此类表示一条驾车或步行路线。
if (route.getDistance(false) <= 0) {
continue;
}//返回路线距离,当format为false时仅返回数值
run(route.getPath());
}
}
//找到每一次小车运动,需要偏移的角度
function findRotation(startPoint,endPoint){
var x = endPoint.lng-startPoint.lng;//lng-经度,lat-纬度
var y = endPoint.lat-startPoint.lat;
if(x==0){
return 0;
}
if(x>0){
var z=Math.sqrt(x*x+y*y);
var jiaodu=Math.round((Math.asin(y/z)/Math.PI*180));//最终角度
if(jiaodu>=0){
return 90-jiaodu;
}else{
return 90+Math.abs(jiaodu);
}
}
if(x<0){
var z=Math.sqrt(x*x+y*y);
var jiaodu=Math.round((Math.asin(y/z)/Math.PI*180));//最终角度
if(jiaodu>=0){
return 270+jiaodu;
}else{
return 270-Math.abs(jiaodu);
}
}
}
//小车的运动过程
function run(pts){
var paths = pts.length; //获得有几个点
var carMk = new BMap.Marker(pts[0],{icon:myIcon});
var label = new BMap.Label("", {
offset : new BMap.Size(20, -10)
});
label.setTitle("京A00001");
carMk.setLabel(label);
map.addOverlay(carMk);
i=0;
function resetMkPoint(i){
if(i<paths-1){
console.log(findRotation(pts[i],pts[i+1]));
//var rotationed=carMk.getRotation();//该点已经旋转的角度
carMk.setRotation(findRotation(pts[i],pts[i+1]));//设置旋转角度
}
carMk.setPosition(pts[i]);
if(i < paths){
setTimeout(function(){
i++;
resetMkPoint(i);
},100);//修改时间间隔100,能控制小车跑完全程所用的时间。
}
}
setTimeout(function(){
resetMkPoint(0);
},5000) //setTimeout;延时
}
</script>