<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Track</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#controller{100%; border-bottom:3px outset; height:30px; filter:alpha(Opacity=100); -moz-opacity:1; opacity:1; z-index:10000; background-color:lightblue;}
#container{height:100%}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=D2b4558ebed15e52558c6a766c35ee73"></script>
<script type="text/javascript">
<!--
-->
// var b='114.00100, 22.550000;114.00130,22.550000;114.00160, 22.550000;114.00200, 22.550000;114.00500, 22.550000;114.00400, 22.550000;114.00500, 22.550000;114.00505, 22.549800;114.00510, 22.550000;114.00515, 22.550000;114.00525, 22.550400;114.00100,22.550000;'
var b=' 121.189305792064,31.8975651985742;121.191639058305,31.8979887816012;121.191976917318,31.8955231278353;121.191888619994,31.887752569483;121.191885182053,31.8842103957777;121.19513734574,31.8831302433019;121.195268405444,31.883096401148;121.195241870968,31.8830861742101;121.197108260474,31.8867763175832;121.197083149458,31.887340952899;121.197037983964,31.8883703007167;121.196996151849,31.8895379753714;121.196982630525,31.8905542467113;121.189305792064,31.8975651985742;'
var strs= new Array(); //定义一数组
strs=b.split(";"); //字符分割
//获取所有点的坐标
var points = new Array();
for(var i= 0;i<strs.length-1;i++){
var arry=new Array();
arry=strs[i].split(",");
points.push(new BMap.Point(arry[0],arry[1]));
}
var map; //百度地图对象
var car; //汽车图标
var label; //信息标签
var centerPoint;
var timer; //定时器
var index = 0; //记录播放到第几个point
var followChk, playBtn, pauseBtn, resetBtn; //几个控制按钮
function init() {
followChk = document.getElementById("follow");
playBtn = document.getElementById("play");
pauseBtn = document.getElementById("pause");
resetBtn = document.getElementById("reset");
//初始化地图,选取第一个点为起始点
map = new BMap.Map("container");
map.centerAndZoom(points[0], 15);
map.enableScrollWheelZoom();
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl({isOpen: true}));
//通过DrivingRoute获取一条路线的point
var driving = new BMap.DrivingRoute(map);
var driving1 = new BMap.DrivingRoute(map);
if (points.length%2 == 0){
driving.search(points[0], points[points.length/2]);
driving1.search(points[(points.length/2)+1], points[points.length-1]);
}else{
driving.search(points[0], points[(points.length+1)/2]);
driving1.search(points[((points.length+1)/2)+1], points[points.length-1]);
}
driving.setSearchCompleteCallback(function() {
//得到路线上的所有point
points = driving.getResults().getPlan(0).getRoute(0).getPath();
//画面移动到起点和终点的中间
centerPoint = new BMap.Point((points[0].lng + points[points.length - 1].lng) / 2, (points[0].lat + points[points.length - 1].lat) / 2);
map.panTo(centerPoint);
//连接所有点
map.addOverlay(new BMap.Polyline(points, {strokeColor: "black", strokeWeight: 5, strokeOpacity: 1}));
//map.addOverlay(new BMap.Polyline(points, {strokeColor: "black", strokeWeight: 5, strokeOpacity: 1}));
// map.addOverlay(new BMap.Polyline(points[1], {strokeColor: "black", strokeWeight: 5, strokeOpacity: 1}));
//显示小车子
label = new BMap.Label("", {offset: new BMap.Size(-20, -20)});
car = new BMap.Marker(points[0]);
car.setLabel(label);
map.addOverlay(car);
//点亮操作按钮
playBtn.disabled = false;
resetBtn.disabled = false;
});
driving1.setSearchCompleteCallback(function() {
//得到路线上的所有point
points1 = driving1.getResults().getPlan(0).getRoute(0).getPath();
for (var i=0; i < points1.length; i++) {
points.push(points1[i]);
}
//画面移动到起点和终点的中间
centerPoint = new BMap.Point((points[0].lng + points[points.length - 1].lng) / 2, (points[0].lat + points[points.length - 1].lat) / 2);
map.panTo(centerPoint);
//连接所有点
map.addOverlay(new BMap.Polyline(points, {strokeColor: "black", strokeWeight: 5, strokeOpacity: 1}));
//map.addOverlay(new BMap.Polyline(points, {strokeColor: "black", strokeWeight: 5, strokeOpacity: 1}));
// map.addOverlay(new BMap.Polyline(points[1], {strokeColor: "black", strokeWeight: 5, strokeOpacity: 1}));
//显示小车子
label = new BMap.Label("", {offset: new BMap.Size(-20, -20)});
car = new BMap.Marker(points[0]);
car.setLabel(label);
map.addOverlay(car);
//点亮操作按钮
playBtn.disabled = false;
resetBtn.disabled = false;
});
}
function play() {
playBtn.disabled = true;
pauseBtn.disabled = false;
var point = points[index];
if(index > 0) {
map.addOverlay(new BMap.Polyline([points[index - 1], point], {strokeColor: "red", strokeWeight: 1, strokeOpacity: 1}));
}
label.setContent("经度: " + point.lng + "<br>纬度: " + point.lat);
car.setPosition(point);
index++;
if(followChk.checked) {
map.panTo(point);
}
if(index < points.length) {
timer = window.setTimeout("play(" + index + ")", 200);
} else {
playBtn.disabled = true;
pauseBtn.disabled = true;
map.panTo(point);
}
}
function pause() {
playBtn.disabled = false;
pauseBtn.disabled = true;
if(timer) {
window.clearTimeout(timer);
}
}
function reset() {
followChk.checked = false;
playBtn.disabled = false;
pauseBtn.disabled = true;
if(timer) {
window.clearTimeout(timer);
}
index = 0;
car.setPosition(points[0]);
map.panTo(centerPoint);
}
</script>
</head>
<body onload="init();">
<div id="controller" align="center">
<input id="follow" type="checkbox"><span style="font-size:12px;">画面跟随</span></input>
<input id="play" type="button" value="播放1" onclick="play();" disabled />
<input id="pause" type="button" value="暂停" onclick="pause();" disabled />
<input id="reset" type="button" value="重置" onclick="reset()" disabled />
</div>
<div id="container"></div>
</body>
</html>