UniApp中使用Amap实现track review

<template>
	<view class="map-container">
		<view id="map" class="map" :style="{ width: '100%', height: mapHeight + 'px' }"></view>
		<view class="input-card">
			<view class="input-item">
				<button class="btn" @click="echarts.startAnimation">开始动画</button>
				<button class="btn" @tap="echarts.pauseAnimation">暂停动画</button>
			</view>
			<view class="input-item">
				<button class="btn" @tap="echarts.resumeAnimation">继续动画</button>
				<button class="btn" @tap="echarts.stopAnimation">停止动画</button>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				mapHeight: 0,
			};
		},
		onReady() {
			// 创建map对象
			this.map = uni.createMapContext('map');
			// 获取屏幕高度
			uni.getSystemInfo({
				success: res => {
					this.windowHeight = res.windowHeight;
				}
			});
		},

		mounted() {
			this.setNavTop('.map')
		},
		methods: {
			setNavTop(style) {
				let view = uni.createSelectorQuery().select(style);
				view.boundingClientRect(data => {
						this.mapHeight = this.windowHeight - data.height;
					})
					.exec();
			},

		},
	};
</script>



<script module="echarts" lang="renderjs">
	export default {
		data() {
			return {
				lineArrs: [],
			};
		},

		mounted() {
		  const script = document.createElement('script');
		  script.src = `https://webapi.amap.com/maps?v=1.4.15&key=your_key`;
		  script.onload = async () => {
		    window._AMapSecurityConfig = {
		      securityJsCode: 'you_xxx',
		    };
		    await this.getLocation();
		    this.initAmap();
		  };
		  document.head.appendChild(script);
		},


		methods: {
			getLocation() {
				return new Promise((resolve, reject) => {
					uni.request({
						url: this.$baseUrl + "/api/history?machine_no=" + this.machine_no + '&date=' + this.date,
						success: (res) => {
							console.log("@@打印轨迹1", res.data.data.list);
							this.lineArr = res.data.data.list; // 需要res.data.data才有数据
							resolve();
						},
						fail: (err) => {
							reject(err);
						}
					});
				});
			},
			
			initAmap() {
				const lineArr = this.lineArr
				console.log("@@打印轨迹", lineArr);
				this.lineArrs = lineArr

				const map = new AMap.Map('map', {
					zoom: 10,
					center: [116.397428, 39.90923] // 设置地图中心点
				})

				const marker = new AMap.Marker({
					map: map,
					position: [116.478935, 39.997761],
					icon: "https://webapi.amap.com/images/car.png",
					offset: new AMap.Pixel(-26, -13),
					autoRotation: true,
					angle: -90,
				});

				const polyline = new AMap.Polyline({
					map: map,
					path: lineArr,
					showDir: true,
					strokeColor: "#28F",
					strokeWeight: 6,
				});

				const passedPolyline = new AMap.Polyline({
					map: map,
					strokeColor: "#AF5",
					strokeWeight: 6,
				});

				marker.on('moving', function(e) {
					passedPolyline.setPath(e.passedPath);
				});

				map.setFitView();

				this.marker = marker;
			},
			startAnimation() {
				const marker = this.marker;
				marker.moveAlong(this.lineArrs, 200);
			},
			pauseAnimation() {
				const marker = this.marker;
				marker.pauseMove();
			},
			resumeAnimation() {
				const marker = this.marker;
				marker.resumeMove();
			},
			stopAnimation() {
				const marker = this.marker;
				marker.stopMove();
			}
		},
	};
</script>

<style lang="scss" scoped>
	高德地图-logo隐藏
	/deep/.amap-logo {
	  display: none;
	  opacity: 0 !important;
	}
	//高德地图-版权隐藏
	/deep/.amap-copyright {
		opacity: 0;
	}
	.input-card {
		position: fixed;
		bottom: 7%;
		width: 100%;
	}
	.input-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 32rpx;
	}
</style>

后端

public function history()
    {
        $list = $this->_getLocation();
        $result = [
            'list'  => $list
        ];
        return $this->success($result);
    }   


    public function _getLocation()
    {
        $list = [
            [116.478935, 39.997761],
            [116.478939, 39.997825],
            [116.478912, 39.998549],
            [116.478912, 39.998549],
            [116.478998, 39.998555],
            [116.478998, 39.998555],
            [116.479282, 39.99856],
            [116.479658, 39.998528],
            [116.480151, 39.998453],
            [116.480784, 39.998302],
            [116.480784, 39.998302],
            [116.481149, 39.998184],
            [116.481573, 39.997997],
            [116.481863, 39.997846],
            [116.482072, 39.997718],
            [116.482362, 39.997718],
            [116.483633, 39.998935],
            [116.48367, 39.998968],
            [116.484648, 39.999861]
        ];
        return $list;
    }