实现百度地图行驶轨迹功能

Shuanger_06

已于 2023-08-03 16:38:30 修改

阅读量388

点赞数

分类专栏：其他文章标签：百度前端 javascript

于 2023-07-24 11:26:45 首次发布

本文链接：https://blog.csdn.net/weixin_44389116/article/details/131892534

版权

其他专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Video_2023-07-24_112432

<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>百度地图的动态行驶轨迹</title>
		<style type="text/css">
			html,
			body {
				height: 100%;
			}
		</style>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=wIt2mDCMGWRIi2pioR8GZnfrhSKQHzLY"></script>
	</head>

	<body>
		<div id="mapId" style="height: 100%;"></div>
		<script>
			var PointArr = [{
				lat: 36.10339957700999,
				lng: 120.4207801005104
			}, {
				lat: 36.10349055332635,
				lng: 120.42113539348455
			}, {
				lat: 36.10452708476511,
				lng: 120.42076268466177
			}, {
				lat: 36.10480132817409,
				lng: 120.4196557913201
			}, {
				lat: 36.10560773716036,
				lng: 120.418951386886
			}, {
				lat: 36.10621159088823,
				lng: 120.41900182905378
			}, {
				lat: 36.1064641068988,
				lng: 120.41992809616544
			}, {
				lng: 120.42201589513277,
				lat: 36.10700627324672
			}, {
				lng: 120.42236704579075,
				lat: 36.10708566579729
			}, {
				lng: 120.42269817692573,
				lat: 36.107201270041955
			}, {
				lng: 120.42239277578172,
				lat: 36.10812797579566
			}, {
				lng: 120.42175457671763,
				lat: 36.10947659586882
			}, {
				lng: 120.42144906678747,
				lat: 36.11028554037044
			}, {
				lng: 120.42134433787885,
				lat: 36.110691285540966
			}, {
				lng: 120.42234193234574,
				lat: 36.110931417305515
			}];
			var map = new BMap.Map("mapId");
			map.centerAndZoom(PointArr, 15); // 根据经纬度显示地图的范围
			map.setViewport(PointArr); // 根据提供的地理区域或坐标设置地图视野

			addStartMarker(new BMap.Point(PointArr[0].lng, PointArr[0].lat), '起点', map);
			var carMk; //先将终点坐标展示的mark对象定义
			//小车行驶图标
			var drivingPoint = new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/car.png', new BMap.Size(52, 26), {
				imageSize: new BMap.Size(52, 26)
			});
			//终点图标
			var terminalPoint = new BMap.Icon('./img/end.png', new BMap.Size(45, 45), {
				imageSize: new BMap.Size(45, 45)
			});
			var i = 0;
			var interval = setInterval(function() {
				if(i >= PointArr.length) {
					clearInterval(interval);
					return;
				}
				drowLine(map, PointArr[i], PointArr[i + 1]); //画线调用
				i = i + 1;
			}, 1000);

			// 划线
			function drowLine(map, PointArr, PointArrNext) {
				if(PointArrNext != undefined) {
					var polyline = new BMap.Polyline(
						[
							new BMap.Point(PointArr.lng, PointArr.lat),
							new BMap.Point(PointArrNext.lng, PointArrNext.lat)
						], {
							strokeColor: "green",
							strokeWeight: 7,
							strokeOpacity: 1
						}); //创建折线
					map.addOverlay(polyline);
					addMarkerEnd(new BMap.Point(PointArrNext.lng, PointArrNext.lat), '小车行驶', map, PointArrNext, new BMap.Point(PointArr.lng, PointArr.lat)); //添加图标
				} else {
					addMarkerEnd(new BMap.Point(PointArr.lng, PointArr.lat), '终点', map); //添加终点图标
				}
			}
			//添加起始图标
			function addStartMarker(point, name, mapInit) {
				if(name == "起点") {
					var myIcon = new BMap.Icon("./img/start.png", new BMap.Size(45, 45), {
						imageSize: new BMap.Size(45, 45) //图标所用的图片的大小，此功能的作用等同于CSS中的background-size属性。可用于实现高清屏的高清效果
					});
					window.marker = new BMap.Marker(point, {
						icon: myIcon
					}); // 创建标注
					mapInit.addOverlay(marker); // 将标注添加到地图中
				}
			}
			//添加行驶和终点图标
			function addMarkerEnd(point, name, mapInit, trackUnit, prePoint) {
				if(name == "小车行驶") {
					if(carMk) { //先判断第一次进来的时候这个值有没有定义，有的话就清除掉上一次的。然后在进行画图标。第一次进来时候没有定义也就不走这块，直接进行画图标
						mapInit.removeOverlay(carMk);
					}
					carMk = new BMap.Marker(point, {
						icon: drivingPoint
					}); // 创建标注
					carMk.setRotation(getAngle(point, prePoint) - 90); // 旋转的角度
					mapInit.addOverlay(carMk); // 将标注添加到地图中
				} else {
					mapInit.removeOverlay(carMk);
					carMk = new BMap.Marker(point, {
						icon: terminalPoint
					}); // 创建标注
					mapInit.addOverlay(carMk);
				}
			}
			//获得角度的函数
			function getAngle(n, next) {
				var ret
				var w1 = n.lat / 180 * Math.PI
				var j1 = n.lng / 180 * Math.PI

				var w2 = next.lat / 180 * Math.PI
				var j2 = next.lng / 180 * Math.PI

				ret = 4 * Math.pow(Math.sin((w1 - w2) / 2), 2) - Math.pow(Math.sin((j1 - j2) / 2) * (Math.cos(w1) - Math.cos(w2)), 2);
				ret = Math.sqrt(ret);

				var temp = Math.sin((j1 - j2) / 2) * (Math.cos(w1) + Math.cos(w2));
				console.log(temp)
				ret = ret / temp;
				ret = Math.atan(ret) / Math.PI * 180;
				ret += 90;

				// 这里用如此臃肿的if..else是为了判定追踪单个点的具体情况,从而调整ret的值
				if(j1 - j2 < 0) {
					if(w1 - w2 < 0) {
						ret;
					} else {
						ret = -ret + 180;
					}
				} else {
					if(w1 - w2 < 0) {
						ret = 180 + ret;
					} else {
						ret = -ret;
					}
				}
				return ret;
			}
		</script>
	</body>

</html>