vue使用高德地图轨迹活动效果demo(整理)

在html页面引入您自己的key
<script language="javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=6b26c2c58770d13a4ecf2b96615dbaee">
		</script>

<template>
	<div class="index">
		<div id="amapContainer"></div>
	</div>
</template>

<script>
	const pathList = [{
			path: [120.99152, 27.937717],
			msg: '2023-12-14 14:21:43'
		},
		{
			path: [120.99152, 27.937717],
			msg: '2023-12-14 14:21:43'
		},
		{
			path: [120.99152, 27.937717],
			msg: '2023-12-14 14:21:43'
		},
		{
			path: [120.99152, 27.937717],
			msg: '2023-12-14 14:21:43'
		},
		{
			path: [119.654841, 26.345312],
			msg: '2023-12-14 14:21:43'
		},
		{
			path: [119.604823, 26.146219],
			msg: '2023-12-14 14:21:43'
		},
		{
			path: [119.608848, 25.888029],
			msg: '2023-12-14 14:21:43'
		},
		{
			path: [119.604823, 25.719924],
			msg: '2023-12-14 14:21:43'
		},
		{
			path: [119.700834, 25.637084],
			msg: '2023-12-14 14:21:43'
		},
		{
			path: [119.750277, 25.506716],
			msg: '2023-12-14 14:21:43'
		},
		{
			path: [120.07108, 25.189062],
			msg: '2023-12-14 14:21:43'
		},
		{
			path: [120.374635, 24.832797],
			msg: '2023-12-14 14:21:43'
		},
		{
			path: [120.627598, 24.087605],
			msg: '2023-12-14 14:21:43'
		},
		{
			path: [120.406831, 22.596914],
			msg: '2023-12-14 14:21:43'
		},
		{
			path: [120.866763, 22.267658],
			msg: '2023-12-14 14:21:43'
		}
	];
	export default {
		name: 'amapFence',
		data() {
			return {
				path: [], // 当前绘制的多边形经纬度数组
				polygonItem: [], // 地图上绘制的所有多边形对象
				polyEditors: [] // 所有编辑对象数组
			};
		},
		props: {
			paths: {} // 编辑
		},
		mounted() {
			this.intAmap(() => {});
		},
		methods: {
			// 绘制路线，
			drawPath(path) {
				const polyline1 = new AMap.Polyline({
					path, // 设置线覆盖物路径
					showDir: true,
					strokeColor: '#58aaff', // 线颜色
					strokeWeight: 5 // 线宽
				});
				this.map.add([polyline1]);
			},
			// 绘制圆点
			createMaker(path = []) {
				console.log(path, 'path--');
				path.forEach(v => {
					// 点标记显示内容，HTML要素字符串
					const markerContent = `<div class="amap-maker-icon"><div class="title">${v.msg}</div></div>`;
					const position = new this.AMap.LngLat(v.path[0], v.path[1]);
					const marker = new this.AMap.Marker({
						position: position,
						// 将 html 传给 content
						content: markerContent,
						// 以 icon 的 [center bottom] 为原点
						offset: new this.AMap.Pixel(-5, -5)
					});

					// 将 markers 添加到地图
					this.map.add(marker);
				});
			},
			// 地图初始化
			intAmap(callBack) {
				this.AMap = window.AMap;
				this.AMap.plugin(['AMap.MouseTool', 'AMap.PolyEditor', 'AMap.ControlBar'], function() {
					//TODO  创建控件并添加
				});
				const len = Math.ceil(pathList.length / 2); // 数组中间那个数据
				const center = [pathList[len].path[0], pathList[len].path[1]];

				this.map = new this.AMap.Map("amapContainer", {
					center,
					zoom: 6,
					pitch: 80,
					layers: [new AMap.TileLayer.Satellite()],
					viewMode: '2D', //开启3D视图,默认为关闭
					buildingAnimation: true, //楼块出现是否带动画
				});

				this.map.addControl(new this.AMap.ControlBar());//可以隐藏看看什么效果
				if (callBack && typeof callBack == 'function') {
					callBack();
					this.drawPath(pathList.map(v => v.path));
					this.createMaker(pathList);
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	::v-deep#amapContainer {
		height: 800px;
		width: 100%;

		.amap-maker-icon {
			position: relative;
			height: 10px;
			width: 10px;
			border-radius: 10px;
			background: red;

			&:hover {
				.title {
					display: block;
				}
			}

			.title {
				// display: none;
				position: absolute;
				top: -20px;
				left: -70px;
				width: 150px;
				color: #333;
				font-size: 10px;
				border-radius: 5px;
				background: rgba(256, 256, 256)
			}
		}
	}
	
/* 高德地图隐藏大小标记logo--放公用css样式里 */
.amap-logo {
	display: none !important;
}

.amap-copyright {
	display: none !important;
}

/* 高德地图控制比例尺大小-可以css控制 */
.amap-luopan,
.amap-luopan-bg {
	height: 170px !important;
}
.amap-compass {
	width: 89px !important;
	height: 89px !important;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197