轨迹回放百度地图

最新推荐文章于 2022-02-07 16:07:05 发布

几番风雨

最新推荐文章于 2022-02-07 16:07:05 发布

阅读量1.4k

点赞数

分类专栏：百度地图调用文章标签：地图

本文链接：https://blog.csdn.net/Oyj1020/article/details/14169319

版权

百度地图调用专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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{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%}
</style>  
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=D2b4558ebed15e52558c6a766c35ee73"></script>
<script type="text/javascript" src="Concurrent.Thread.js"> </script> 
<script type="text/javascript">
//获取所有点的坐标
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 points1 = [
	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 driving;
var point;
var timer;     //定时器
var index = 0; //记录播放到第几个point

function init() {
   initBMap();
   initCar();
   playRealTrace();
}



function initBMap() {
    //获取按钮的引用
	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}));
}


function playRealTrace() {
    index = 0;
	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();
		//画面移动到起点和终点的中间
		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}));
		carMove();
	});
	
}


function initCar() {
    //显示小车子
	label = new BMap.Label("", {offset: new BMap.Size(-20, -20)});
	car = new BMap.Marker(points[0]);
	car.setLabel(label);
	map.addOverlay(car);
}


function carMove() {
	playBtn.disabled = true;
	pauseBtn.disabled = false;
	
    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("carMove(" + index + ")", 200);
	} else {
	   playRealTrace();
	}
}




</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="播放" οnclick="play();"  />
		<input id="pause" type="button" value="暂停" οnclick="pause();"  />
		<input id="getGps" type="button" value="获取数据" οnclick="getGps();"  />
		<input id="reset" type="button" value="重置" οnclick="reset()"  />
	</div>
	<div id="container"></div>
</body>  
</html>

几番风雨

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
轨迹回放百度地图

Track 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;
复制链接

扫一扫