MingGaoApp_vue/MingGaoApp/pages/my/map.nvue

<template>
	<view class="content">
		<map id="map" ref="map" :show-location="true" :style="{width:'750rpx',height:phoneHeight+'px'}"
			:latitude="latitude" :longitude="longitude" :markers="covers" :polyline="polylines">
		</map>
		<view class="fixed-bottom">
			<u-cell :title="date" isLink :border="false" @click="handleSelectDate"></u-cell>
			<u-button style="margin-left: 20rpx;" text="播放" type="primary" @click="handlePlayWalkTrack" size="small">
			</u-button>
		</view>
		<u-loading-page loading-text="加载中..." bgColor="transparent" :loading="loading" font-size="16"></u-loading-page>
		<u-calendar :monthNum="monthNum" :defaultDate="date" :minDate="minDate" :maxDate="maxDate"
			:show="calendarVisible" mode="single" @confirm="handleConfirmSelected" @close="handleCalendarClose">
		</u-calendar>
	</view>
</template>

<script>
	import * as trackService from '@/service/track.js'
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex'
	import {
		forIn,
		takeRight,
		keys,
		map,
		first,
		flatten,
		uniqBy
	} from 'lodash-es';
	import dayjs from 'dayjs'

	const markerPath = '/static/person.png';

	export default {
		data() {
			return {
				show: false,
				isUpdateLocation: false,
				title: 'Hello',
				list: [{
					text: '点赞',
					color: 'blue',
					fontSize: 28
				}, {
					text: '分享'
				}, {
					text: '评论'
				}],
				show: true,
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					id: 1,
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: markerPath,
					width: 20,
					height: 20,
				}],
				// {
				// 	points: [{
				// 			latitude: 39.909,
				// 			longitude: 116.39742
				// 		},
				// 		{
				// 			latitude: 39.9,
				// 			longitude: 116.39
				// 		},
				// 		{
				// 			latitude: 39.88,
				// 			longitude: 116.34
				// 		},
				// 		{
				// 			latitude: 39.83,
				// 			longitude: 116.31
				// 		},
				// 		{
				// 			latitude: 39.8,
				// 			longitude: 116.3
				// 		},
				// 	],

				// }
				logs: [],
				polylines: [],
				allLocationDatasource: {},
				phoneHeight: 600,
				loading: false,
				userinfo: {},
				page: 1,
				pageSize: 10,
				total: 0,
				date: dayjs().format('YYYY-MM-DD'),
				calendarVisible: false,
				minDate: dayjs().subtract(5, 'months').format('YYYY-MM-DD'),
				maxDate: dayjs().add(1, 'days').format('YYYY-MM-DD'),
				monthNum: 12,
			}
		},
		onLoad() {
			const that = this;
			uni.getSystemInfo({
				//异步获取。
				success(res) {
					that.phoneHeight = res.windowHeight; //窗口高度
					console.log(that.phoneHeight)
				},
			})

		},
		onReady() {

			console.log(this.$refs.map, 'on ready')
			this._mapContext = uni.createMapContext('map', this);

			this.setCenterPosition()
		},
		computed: {
			...mapGetters(['userUID']),
			currentLogs() {
				return takeRight(this.logs, 5)
			},

		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				this.getTrackList();
			},
			getTrackList() {
				this.loading = true;
				const payload = {
					page: this.page,
					page_item: this.pageSize,
					uid: this.userUID,
					create_time: this.date
				}
				
				console.warn(payload,'get track list payload')

				trackService.fetchTrackListWithDate(payload).then(res => {
					console.warn(res, '------------ track list')
					this.total = res.total_item;
					this.allLocationDatasource = first(res.page_list);
					this.updatePolylines();
				}).finally(() => {
					this.loading = false;
				})
			},
			updatePolylines() {
				const walkList = this.allLocationDatasource['walk_list'] || [];

				const groupWalkDataList = uniqBy(flatten(walkList), item => item.create_time.trim()).sort((a, b) => +dayjs(
					a.create_time) - (+dayjs(b.create_time)))

				this.polylines = map([groupWalkDataList], (singleWalkList, index) => {

					return {
						points: map(singleWalkList, item => {
							return {
								latitude: item.lat,
								longitude: item.lng
							}
						}),
						color: '#44b449',
						arrowLine: true,
					}
				})



				const startData = first(first(walkList));

				const startLocation = {
					latitude: startData.lat,
					longitude: startData.lng
				}

				this._mapContext.moveToLocation(startLocation);
			},
			setCenterPosition() {
				uni.getLocation({
					type: 'gcj02',
					altitude: true,
					success: (res) => {
						console.warn(res, 'get location')
						console.log('当前位置的经度1：' + res.longitude);
						console.log('当前位置的纬度1：' + res.latitude);

						this.logs.push(`center-position:当前位置的经度${res.longitude};当前位置的纬度${res.latitude}`)

						this.latitude = res.latitude;
						this.longitude = res.longitude;

						this._mapContext.moveToLocation({
							latitude: res.latitude,
							longitude: res.longitude
						})

						this.covers = [{
							id: 1,
							latitude: res.latitude,
							longitude: res.longitude,
							iconPath: markerPath,
							width: 40,
							height: 40,
						}]
					},
					fail(err) {
						console.warn(err, 'get location error')
					}
				});
			},
			startGetLocation() {
				this.isUpdateLocation = true
				this.setCenterPosition()
			},
			endGetLocation() {
				this.isUpdateLocation = false
			},
			getLocation() {
				return new Promise((resolve, reject) => {
					console.log('getlocation start', this.isUpdateLocation)
					if (!this.isUpdateLocation) {
						console.log('getlocation start 1 close')
						resolve(true)
						return
					}

					console.log('getlocation start 2 exec')

					uni.getLocation({
						type: 'gcj02',
						success: (res) => {
							console.log('当前位置的经度：' + res.longitude);
							console.log('当前位置的纬度：' + res.latitude);
							this.logs.push(`记录中:当前位置的经度${res.longitude};当前位置的纬度${res.latitude}`)

							resolve(false)
						},
						fail(err) {
							console.warn(err, 'get location error')
						}
					});
				})

			},
			handleTransformHistory() {
				if (!this.polylines.length) {
					return
				}

				const startData = first(this.polylines[0].points)

				this._mapContext.moveToLocation({
					latitude: startData.latitude,
					longitude: startData.longitude
				})

				this.execMoveQueueList(map(this.polylines, item => item.points))

			},
			execMoveQueueList(queueList = []) {
				const markerID = this.covers[0] && this.covers[0].id;
				let index = 0;
				const that = this;

				const exec = function() {
					const linePointDataList = queueList[index] || [];
					const path =
						that._mapContext.moveAlong({
							markerId: markerID,
							path: linePointDataList,
							duration: 30000,
							autoRotation: false,
							success() {
								if (index < queueList.length - 1) {
									index++;
									exec();
								}
							},
							fail(err) {
								console.error(err)
							},
							complete() {
								console.log('move complete ----------------------')
							}
						})
				}

				exec();
			},
			handlePlayWalkTrack() {
				this.handleTransformHistory();
			},
			handleClearStorage() {
				console.log('clear storage')
				uni.clearStorage()
			},
			handleSelectDate() {
				this.calendarVisible = true;
			},
			handleConfirmSelected(dateList) {
				this.date = first(dateList) || dayjs().format('YYYY-MM-DD');
				this.handleCalendarClose();
				this.getTrackList();
			},
			handleCalendarClose() {
				this.calendarVisible = false;
			}
		}
	}
</script>

<style>
	.content {
		padding-top: 100rpx;
	}

	.fixed-bottom {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		padding: 24rpx;
		background-color: #fff;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
</style>