<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>function</title>
<style>
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#controller{width: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%;width: 100%;}
</style>
</head>
<body onload="init();">
<div id="controller" align="center">
<input id="follow" type="checkbox"><span style="font-size:12px;">畫面跟隨</span></input>
<input type="button" name="" id="play" onclick="play();" value="播放" disabled/>
<input type="button" name="" id="pause" onclick="pause();" value="暫停" disabled/>
<input type="button" name="" id="reset" onclick="reset();" value="重置" disabled/>
</div>
<div id="container"></div>
</body>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=D2b4558ebed15e52558c6a766c35ee73"></script>
<script>
//獲取所有點的座標
var points = [
new BMap.Point(114.00100, 22.550000), new BMap.Point(114.00130, 22.550000),
new BMap.Point(114.00160, 22.550000), new BMap.Point(114.00200, 22.550000),
new BMap.Point(114.00300, 22.550500), new BMap.Point(114.00400, 22.550000),
new BMap.Point(114.00500, 22.550000), new BMap.Point(114.00505, 22.549800),
new BMap.Point(114.00510, 22.550000), new BMap.Point(114.00515, 22.550000),
new BMap.Point(114.00525, 22.550400), new BMap.Point(114.00537, 22.549500)
];
var map; //百度地圖對象
var car; //汽車圖標
var label; //信息標籤
var centerPoint;
var timer; //定時器
var index = 0; //記錄播放到第幾個point
var followChk, playBtn, pauseBtn, resetBtn; //幾個控制按鈕
function init(){
// alert(111)
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);
driving.search(new BMap.Point(114.00100, 22.550000), new BMap.Point(113.95100, 22.550000));
driving.setSearchCompleteCallback(function() {
//得到路線上的所有point
points = driving.getResults().getPlan(0).getRoute(0).getPath();
// console.log(points);
//畫面移動到起點和終點的中間
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}));
//顯示小車子
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>
</html>
轉自https://blog.csdn.net/canpark/article/details/11962805#commentsedit