JCSS / yl_miniapp

<template>
	<view class="container">
		<view id="map" style="width:100wh;height:100vh" :lineList="lineList" :change:lineList="AMapInstance.setLineList"></view>
		<view class="control fs-p20 fs-bg__white fs-radius__sm fs-size__h5">
			<view class="fs-flex fs-mb20">
				<view class="fs-mr20 fs-color__primary fs-border fs-px20 fs-py10 fs-radius__sm" @click="AMapInstance.startAnimation">开始动画</view>
				<view class="fs-color__primary fs-border fs-px20 fs-py10 fs-radius__sm" @click="AMapInstance.pauseAnimation">暂停动画</view>
			</view>
			<view class="fs-flex">
				<view class="fs-mr20 fs-color__primary fs-border fs-px20 fs-py10 fs-radius__sm" @click="AMapInstance.resumeAnimation">继续动画</view>
				<view class="fs-color__primary fs-border fs-px20 fs-py10 fs-radius__sm" @click="AMapInstance.stopAnimation">停止动画</view>
			</view>
		</view>
		<view class="date fs-bg__white fs-radius__sm">
			<tui-input label="选择日期" placeholder="请选择" :size="28" padding="20rpx 20rpx" disabled v-model="date" @click="openDate"></tui-input>
		</view>
		<tui-datetime :type="2" ref="dateTime" radius @confirm="dateChange"></tui-datetime>
	</view>
</template>

<script>
import { apiUserGpsList } from '@/api/work'
export default {
	data() {
		return {
			userId: 0,
			date: '',
			lineList: []
		}
	},
	onLoad(options) {
		this.userId = options.id
		// 获取当前日期
		const currentDate = new Date()
		const year = String(currentDate.getYear() + 1900)                  // 需要加上1900
		const month = String(currentDate.getMonth() + 1).padStart(2, '0')  // 需要补零
		const day = String(currentDate.getDate()).padStart(2, '0')         // 需要补零
		this.date = year + '-' + month + '-' + day
		this.getUserGpsList()
	},
	methods: {
		// 查询轨迹列表
		getUserGpsList() {
			apiUserGpsList({data:{user_id:this.userId, commit_time:this.date}}).then(res => {
				var lineList = []
				res.data.forEach(item => {
					lineList.push([item.lon, item.lat])
				})
				if (lineList.length == 0) {
					uni.$tui.toast('该日期无轨迹信息')
				}
				this.lineList = lineList
			})
		},
		// 打开日期选择
		openDate() {
			this.$refs.dateTime.show()
		},
		// 日期选择
		dateChange(e) {
			this.date = e.result
			this.getUserGpsList()
		}
	}
}
</script>
<script module="AMapInstance" lang="renderjs">
export default {
	data() {
		return {
			map: null,
			marker: null,
			lineList: []
		}
	},
	mounted() {
		if (window.AMap) {
			// 观测更新的数据在 view 层可以直接访问到
			this.initAmap()
		} else {
			// 动态引入较大类库避免影响页面展示
			const script = document.createElement('script')
			script.charset = 'utf-8'
			// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
			script.src = 'https://webapi.amap.com/maps?v=2.0&key=89c6c0c88a377f3c272f85efbd54f26f&plugin=AMap.MoveAnimation' //您申请的key值
			//script标签的onload事件都是在外部js文件被加载完成并执行完成后才被触发的
			script.onload = () => {
				window._AMapSecurityConfig = {
					securityJsCode: '17410d15a21623c837ff1064a6ff18f5' //您申请的安全密钥
				}
				this.initAmap()
			}
			document.head.appendChild(script)
		}
	},
	methods: {
		// 设置数据
		setLineList(newValue, oldValue) {
			this.lineList = newValue || []
			this.drawTrack()
		},
		// 初始化地图
		initAmap() {
			this.map = new AMap.Map("map", {
				resizeEnable: true,
				center: [116.397428, 39.90923],
				zoom: 17
			})
			this.drawTrack()
		},
		// 绘制轨迹
		drawTrack() {
			this.map.clearMap()
			var that = this
			this.marker = new AMap.Marker({
				map: that.map,
				position: [that.lineList[0][0], that.lineList[0][1]],
				icon: "./static/images/car.png",
				offset: new AMap.Pixel(-13, -26)
			})
			// 绘制轨迹
			const polyline = new AMap.Polyline({
				map: that.map,
				path: that.lineList,
				showDir:true,
				strokeColor: "#28F",  //线颜色
				strokeWeight: 6       //线宽
			
			})
			const passedPolyline = new AMap.Polyline({
				map: that.map,
				strokeColor: "#AF5",  //线颜色
				strokeWeight: 6       //线宽
			})
			this.marker.on('moving', function (e) {
				passedPolyline.setPath(e.passedPath)
				that.map.setCenter(e.target.getPosition(), true)
			})
			this.map.setFitView()
		},
		// 开始动画
		startAnimation() {
			this.marker.moveAlong(this.lineList, {
				// 每一段的时长
				duration: 500, //可根据实际采集时间间隔设置
				// JSAPI2.0    是否延道路自动设置角度在 moveAlong 里设置
				autoRotation: true
			})
		},
		// 暂停动画
		pauseAnimation () {
			this.marker.pauseMove()
		},
		// 继续动画
		resumeAnimation () {
			this.marker.resumeMove()
		},
		// 停止动画
		stopAnimation () {
			this.marker.stopMove()
		}
	}
}
</script>

<style lang="scss" scoped>
.date {
	width: 360rpx;
	position: fixed;
	top: 10rpx;
	left: 10rpx;
}
.control {
	position: fixed;
	bottom: 34rpx;
	right: 30rpx;
}
</style>