MingGaoApp_vue/MingGaoApp/pages/index/components/Gis.vue

<template>
	<view class="gis-card" ref="mapContainer" id="gis-card">
		<map id="map" ref="map" :show-location="true" :style="{height:contentHeight+'px'}" class="gis-card__content"
			:latitude="latitude" :longitude="longitude" :markers="covers" :polyline="polylines">
		</map>
		<!-- <view v-for="(item,index) in logs" :key="index+item">
			{{item}}
		</view>
		<view class="gis-card__action">
			<u-button text="回放" @click="handleTransformHistory" type="primary" size="mini"></u-button>
		</view> -->
	</view>
</template>

<script>
	import {
		forIn,
		takeRight,
		keys,
		map,
		first,
		isEmpty
	} from 'lodash-es';
	import markerIcon from '@/static/pest.png';
	//walk_lnglat_list 行走轨迹数组字段
	export default {
		props: {
			dataSource: {
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {
				latitude: 34.809478,
				longitude: 113.666798,
				/**
				 * {
					id: 1,
					latitude: 34.809478,
					longitude: 113.666798,
					iconPath: markerIcon
				}
				 */
				covers: [],
				allLocationDatasource: {
					'20230211': []
				},
				logs: [],
				contentHeight: 0,
				polylines: [],
				_mapContext: null
			}
		},
		onShow() {
			console.warn('任务详情 --------- 更新')
		},
		created() {
			console.warn('-------------------- created ------------121313313 gis')

		},
		mounted() {
			console.warn('-------------------- mounted ------------121313313 gis')
			console.log(this.$refs.map, 'on ready', this.dataSource.walk_lnglat_list)
			this.contentHeight = 600;
			this._mapContext = uni.createMapContext('map', this);
			console.log(uni.createMapContext('map', this), '------------------ map context 1')
			this.init();
			this.$nextTick(() => {
				console.log('next tick')
				console.warn('------------------ map context')
				// this.contentHeight = this.$refs['mapContainer'].$el && this.$refs['mapContainer'].$el
				// 	.clientHeight || 300;
				// this.contentHeight = 300;
				// console.warn(this.contentHeight, 'warn =sdsafafasf')
				// this.setCenterPosition()
				
			})

		},
		methods: {
			init() {
				const lines = map(this.dataSource.walk_lnglat_list, item => {
					const paths = map(item, locationData => {
						return {
							latitude: locationData.lat,
							longitude: locationData.lng,
						}
					})


					return {
						points: paths,
						color: '#409eff',
						width: 20
					}
				})

				console.warn(lines, 'polylines')
				this.polylines = lines

				this.updateStartLocation();
			},
			updateStartLocation() {
				const {
					lng,
					lat
				} = first(this.dataSource.walk_lnglat_list[0]) || {}

				this.latitude = lat;
				this.longitude = lng;

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

				// this.covers = [{
				// 	id: 1,
				// 	latitude: lat,
				// 	longitude: lng,
				// 	iconPath: markerIcon
				// }]
			},
			setCenterPosition() {
				uni.getLocation({
					type: 'gcj02',
					altitude: true,
					geocode: 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,
						// }]
					},
					fail: (err) => {
						console.warn(err, 'get location error')
						this.logs.push(err && err.errMsg)
					}
				});
			},
			handleTransformHistory() {

				const markerID = this.covers[0] && this.covers[0].id
				console.log('--------------- transform history', markerID)

				// const linePointDataList = map(this.dataSource.walk_lnglat_list[0] || [], item => {
				// 	return {
				// 		latitude: item.lat,
				// 		longitude: item.lng,
				// 	}
				// })

				// console.warn(linePointDataList, 'transform history', this._mapContext)

				// this._mapContext.moveAlong({
				// 	markerId: markerID,
				// 	path: linePointDataList,
				// 	duration: 30000,
				// 	success() {
				// 		console.log('scucess ----------------------121313')
				// 	},
				// 	fail(err) {
				// 		console.error(err)
				// 	},
				// 	complete() {
				// 		console.log('move complete ----------------------')
				// 	}
				// })
			},
		}
	}
</script>

<style lang="scss" scoped>
	.gis-card {
		position: relative;
		flex: 1 1 auto;
		width: 100%;
		height: 100%;
		// background-color: #f00;

		&__content {
			width: 100%;
			height: 100%;
			// background-color: #00f;
		}

		&__action {
			position: fixed;
			bottom: 0;
		}
	}
</style>