vue+百度地图api实现车辆轨迹运动

1.效果图

2.准备工作 public/index

index.html 
<script src="http://api.map.baidu.com/api?type=webgl&v=2.0&ak=sRDDfAKpCSG5iF1rvwph4Q95M6tDCApL"></script>   

3.html

<div class="normal-box">
            <span class="info-title">车辆定位</span>
        </div>
        <div id="vehicleMap">

        </div>

4.js

data() {
		return {
			url: '/api/sysHomepagesignin/list',
			// 页面查询数据
			queryData: {
				limit: 10,
				page: 1,
				totalRecord: 0,
				startTime: '2020-01-01',
				endTime: '2020-01-01'
			},
			map: '',
			queryVehicleData: {
				// 获取列表参数
				limit: 10,
				page: 1,
				totalRecord: 0,
				// licensePlateNumber: '',
				sbType: 2
			},
			vehicleData: [],
            // 山东青岛车辆轨迹坐标
			PointArr: [
				{ lat: 36.10339957700999, lng: 120.4207801005104 },
				{ lat: 36.10349055332635, lng: 120.42113539348455 },
				{ lat: 36.10370795896673, lng: 120.42162977768736 },
				{ lat: 36.10411490190429, lng: 120.42166901055167 },
				{ lat: 36.104232027406695, lng: 120.42185015059275 },
				{ lat: 36.10425620255758, lng: 120.42202022562539 },
				{ lat: 36.104265908631284, lng: 120.42208225102176 },
				{ lat: 36.104399968669526, lng: 120.42187425183421 },
				{ 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 },
				{ lat: 36.10679444086644, lng: 120.42102125032955 },
				{ lat: 36.107010189089046, lng: 120.42182982905027 },
				{ lat: 36.107014665948654, lng: 120.42193587265254 },
				{ 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.4213722360578, lat: 36.110547069787465 },
				{ lng: 120.42134433787885, lat: 36.110691285540966 },
				{ lng: 120.42234193234574, lat: 36.110931417305515 },
				{ lng: 120.42374305054953, lat: 36.11109804633305 },
				{ lng: 120.42478859440246, lat: 36.111102173671576 },
				{ lng: 120.42606467439863, lat: 36.11129314178323 },
				{ lng: 120.4274220550685, lat: 36.11148065963647 },
				{ lng: 120.42831965719076, lat: 36.111638311669736 },
				{ lng: 120.42839951065358, lat: 36.11164240198062 },
				{ lng: 120.42869196887202, lat: 36.1116737914188 },
				{ lng: 120.43031048017785, lat: 36.11190642360766 },
				{ lng: 120.43239173942534, lat: 36.11229570404404 },
				{ lng: 120.43368467575368, lat: 36.11281195352835 },
				{ lng: 120.43371757862009, lat: 36.11284016439977 },
				{ lng: 120.43379230066179, lat: 36.11284161798212 },
				{ lng: 120.43441423254144, lat: 36.113205746094536 },
				{ lng: 120.43549342023326, lat: 36.11391074053337 },
				{ lng: 120.43637497341942, lat: 36.11441797319607 },
				{ lng: 120.4365024200745, lat: 36.11445405475196 },
				{ lng: 120.43670459776231, lat: 36.11458083085174 },
				{ lng: 120.43745246924915, lat: 36.11507070008782 },
				{ lng: 120.43821097991501, lat: 36.115416050767585 },
				{ lng: 120.43823585473245, lat: 36.11541929557907 },
				{ lng: 120.43859812511984, lat: 36.115583971494395 },
				{ lng: 120.43901701857004, lat: 36.115714318017346 },
				{ lng: 120.43928467292172, lat: 36.11582517772885 },
				{ lng: 120.43959708522435, lat: 36.115963587312805 },
				{ lng: 120.43986466921422, lat: 36.116047547858166 },
				{ lng: 120.44007952157578, lat: 36.11611896447754 },
				{ lng: 120.440167025596, lat: 36.11612294605039 },
				{ lng: 120.44024360205321, lat: 36.116138815526504 },
				{ lng: 120.44026150723737, lat: 36.11614702160796 },
				{ lng: 120.44027344364953, lat: 36.11615215895656 },
				{ lng: 120.44028836484941, lat: 36.1161593311561 },
				{ lng: 120.44034209724579, lat: 36.116201960713745 },
				{ lng: 120.44048233691922, lat: 36.116254585044935 },
				{ lng: 120.4405738257871, lat: 36.116276646228826 },
				{ lng: 120.44073595695149, lat: 36.11635856195875 },
				{ lng: 120.44115463412841, lat: 36.11652357056175 },
				{ lng: 120.44118546544034, lat: 36.11653994619434 },
				{ lng: 120.44121529948468, lat: 36.1165533090833 }
			],
			myIcon: '',
			drivingPoint: '',
			terminalPoint: '',
			interval: null,
			carMk: ''
		}
	},

// 初始化地图
		initMap() {
                var map = new BMapGL.Map('vehicleMap') // 创建Map实例
                map.centerAndZoom(new BMapGL.Point(120.214935, 30.256576), 12) // 初始化地图,设置中心点坐标和地图级别
                map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
			    this.map = map
                this.carDrawFn()
		},
 // 车辆轨迹
		carDrawFn() {
			// 第一条线路
			var i = 0
			this.interval = setInterval(() => {
				if (i >= this.PointArr.length) {
					clearInterval(this.interval)
					return
				}
				this.drowLine(this.map, this.PointArr[i], this.PointArr[i + 1]) //画线调用
				i = i + 1
			}, 1000)
		},
		// 第一条 划线
		drowLine(map, PointArr, PointArrNext) {
			this.drivingPoint = new BMapGL.Icon(
				require('@/assets/images/che.jpg'),
				new BMapGL.Size(52, 26),
				{
					anchor: new BMapGL.Size(27, 13),
					imageSize: new BMapGL.Size(70, 35)
				}
			)
			//终点图标
			this.terminalPoint = new BMapGL.Icon(
				require('@/assets/images/zhongdian.png'),
				new BMapGL.Size(45, 45),
				{
					anchor: new BMapGL.Size(20, 45),
					imageSize: new BMapGL.Size(45, 45)
				}
			)
			if (PointArrNext != undefined) {
				var polyline = new BMapGL.Polyline(
					[
						new BMapGL.Point(PointArr.lng, PointArr.lat),
						new BMapGL.Point(PointArrNext.lng, PointArrNext.lat)
					],
					{
						strokeColor: 'skyblue',
						strokeWeight: 7,
						strokeOpacity: 1
					}
				) //创建折线
				map.addOverlay(polyline)
				this.addMarkerEnd(
					new BMapGL.Point(PointArrNext.lng, PointArrNext.lat),
					'小车行驶',
					map,
					PointArrNext,
					new BMapGL.Point(PointArr.lng, PointArr.lat)
				) //添加图标
			} else {
				return
			}
		},
		// 第一条 添加行驶和终点图标
		addMarkerEnd(point, name, mapInit, trackUnit, prePoint) {
			if (name == '小车行驶') {
				if (this.carMk) {
					mapInit.removeOverlay(this.carMk)
				}
				// debugger;
				this.carMk = new BMapGL.Marker(point, {
					icon: this.drivingPoint
				}) // 创建标注
				this.carMk.setRotation(trackUnit.route) //trackUnit.route
				this.carMk.setRotation(this.getAngle(point, prePoint) - 90) // 旋转的角度
				this.map.addOverlay(this.carMk) // 将标注添加到地图中
			} else {
				mapInit.removeOverlay(this.carMk)
				this.carMk = new BMapGL.Marker(point, {
					icon: this.terminalPoint
				}) // 创建标注
				mapInit.addOverlay(this.carMk)
			}
		},

		//获得角度的函数
		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))
			ret = ret / temp
			ret = (Math.atan(ret) / Math.PI) * 180
			ret += 90
			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
		},
    

mounted() {
		this.initMap()
	},

5.css

body,
html,
#vehicleMap {
	width: 100%;
	/* bug:必须要设置高,否则地图不显示,不能设置单位为%,比如90% */
	height: 90vh;
	margin: 0;
	padding: 0;
	overflow: hidden;
	font-family: '微软雅黑';
}