用百度地图使一辆汽车正常行驶

最新推荐文章于 2023-03-16 15:00:03 发布

ydq402

最新推荐文章于 2023-03-16 15:00:03 发布

阅读量186

点赞数

分类专栏：百度地图API 文章标签： html javascript ViewUI

百度地图API 专栏收录该内容

0 篇文章 0 订阅

订阅专栏


<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<title>点沿直线运动</title>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2&services=true"></script>
	</head>
	<body>
		<div style="width: 1020px; height: 340px; border: 1px solid gray" id="container"></div>
		<input type="button" value="开始" onclick="run();"/>
	</body>
</html>

<script type="text/javascript">
	var map = new BMap.Map("container");
		map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
	var myP1 = new BMap.Point(116.380967, 39.913285);
	//起点
	var myP2 = new BMap.Point(116.424374, 39.914668);
	//终点
	var myIcon = new BMap.Icon("car.jpg", new BMap.Size(140, 98), {
		//小车图片

		//
		offset : new BMap.Size(0, -5), //相当于CSS精灵
		imageOffset : new BMap.Size(0, 0)
	//图片的偏移量。为了是图片底部中心对准坐标点。

	});
	var driving2 = new BMap.DrivingRoute(map, {
		renderOptions : {
			map : map,
			autoViewport : true
		}
	});
	//驾车实例

	driving2.search(myP1, myP2);
	//显示一条公交线路

	function run() {
		var driving = new BMap.DrivingRoute(map);
		//驾车实例
		driving.search(myP1, myP2);
		driving.setSearchCompleteCallback(function() {
			var pts = driving.getResults().getPlan(0).getRoute(0).getPath();
			//通过驾车实例，获得一系列点的数组

				var paths = pts.length;
				//获得有几个点
				var carMk = new BMap.Marker(pts[0], {
					icon : myIcon
				});
				map.addOverlay(carMk);
				i = 0;
				function resetMkPoint(i) {
					carMk.setPosition(pts[i]);
					if (i < paths) {
						setTimeout(function() {
							i++;
							resetMkPoint(i);
						}, 100);
					}
				}
				setTimeout(function() {
					resetMkPoint(5);
					console.log(i);
				}, 100)
			});
	}
</script>