energy-front/pages/home/mytrip/tripmain.nvue

<!-- 首页，支持店铺装修 -->
<template>
	<view class="content">

		<!-- <s-layout title="首页" navbar="custom" tabbar="/pages/index/index" :bgStyle="template.page"
			:navbarStyle="template.style?.navbar" onShareAppMessage>
		</s-layout> -->
		<map :latitude="latitude" :longitude="longitude" class="map_control"
			:style="{'width': windowWidth + 'px', 'height': windowHeight + 'px'}" :polyline="polyline"
			:enable-rotate="true" id="map_control" :markers="covers" ref="map_control">
			<headerTopsTips></headerTopsTips>
			<uni-nav-bar left-icon="left" title="行程轨迹" right-icon="paperplane" backgroundColor="#e6eafa"
				@clickLeft="handlegoback" />
			<!--  -->
			<!-- <button @click="handle_map">点击</button> -->
			<view class="pop_bottom" :style="{'width': windowWidth + 'px'}" v-if="pop_botmms">
				<view class="pop_1" :style="{'width': windowWidth + 'px'}">
					<tripinfo :trip_data="trip_data"></tripinfo>
				</view>
			</view>
		</map>
		<!-- <s-tabbar path="/pages/home/components/mapnvue" /> -->

	</view>
</template>

<script setup>
	import tripinfo from '@/pages/subpackages/components/tripinfo.vue'
	import headerTopsTips from '@/pages/components/header_tops_tips.vue'
	import coordtransform from 'coordtransform';
	// import orderApi from '@/sheep/api/home/order';
	import {
		baseUrl,
		apiPath
	} from '@/sheep/config';
	import {
		ref,
		getCurrentInstance,
		onMounted
	} from 'vue'
	import {
		onLoad,
		onReady,
	} from '@dcloudio/uni-app';
	// 缩小显示范围
	setTimeout(() => {
		handle_map()
	}, 1000)
	// 平移动画
	// setTimeout(() => {
	// 	handle_map_translateMarker()
	// }, 2000)
	const instance = getCurrentInstance()
	const createMapContext = ref(null)
	const map_control = ref(null)
	const latitude = ref(0)
	const longitude = ref(0)
	const trip_data = ref({
		actualPay: 0,
		vehicleId: 0,
		endTime: null
	})
	const covers = ref([{
			id: 2,
			callout: { //自定义标记点上方的气泡窗口 点击有效
				content: '结束位置', //文本
				color: '#ffffff', //文字颜色
				fontSize: 12, //文本大小
				borderRadius: 15, //边框圆角
				borderWidth: '5',
				bgColor: '#e51860', //背景颜色
				display: 'ALWAYS', //常显
			},
			latitude: 0,
			longitude: 0,
		},
		{
			id: 1,
			// label: '起始位置',
			callout: { //自定义标记点上方的气泡窗口 点击有效  
				content: '起始位置', //文本
				color: '#ffffff', //文字颜色
				fontSize: 12, //文本大小
				borderRadius: 15, //边框圆角
				borderWidth: '5',
				bgColor: '#e51860', //背景颜色
				display: 'ALWAYS', //常显
			},
			latitude: 0,
			longitude: 0,
		}
	])
	const info = uni.getSystemInfoSync()
	const statusHeight = info.statusBarHeight
	const windowWidth = info.windowWidth
	const windowHeight = info.windowHeight
	const active_mode = ref(4)
	const pop_botmms = ref(true)
	const polyline = ref([{
		points: [],
		color: '#00aa00',
		width: 8
	}])

	function handlegoback() {
		uni.navigateBack()
	}

	function handle_map_translateMarker() {
		createMapContext.value.translateMarker({
			markerId: 1,
			destination: {
				latitude: covers.value[1].latitude,
				longitude: covers.value[1].longitude
			},
			duration: 10000,
			success: (response) => {
				console.log(response, '成功')
			},
			fail: (error) => {
				console.log(error, 'error')
			},
			complete: (complete) => {
				console.log(complete, 'complete')
			}
		});
	}

	function handle_map() {
		createMapContext.value.includePoints({
			points: polyline.value[0].points,
			success: (response) => {
				console.log(response, '成功')
			},
			fail: (error) => {
				console.log(error, 'error')
			},
			complete: (complete) => {
				console.log(complete, 'complete')
			}
		});
	}

	function handle_data(option) {
		let data = JSON.parse(option.arrays)
		let arrays = []
		for (var i = 0; i < data.length; i++) {
			let coms = coordtransform.wgs84togcj02(data[i].longitude, data[i].latitude)
			let str = {
				latitude: coms[1],
				longitude: coms[0]
			}
			arrays.push(str)
		}
		// console.log(option,'arrays')
		trip_data.value.actualPay = option.actualPay
		trip_data.value.vehicleId = option.vehicleId
		trip_data.value.endTime = option.endTime
		trip_data.value.ridingTime = option.ridingTime
		if (arrays.length > 0) {
			polyline.value[0].points = arrays
			covers.value[0].latitude = arrays[0].latitude
			covers.value[0].longitude = arrays[0].longitude
			covers.value[1].latitude = arrays[arrays.length - 1].latitude
			covers.value[1].longitude = arrays[arrays.length - 1].longitude
			latitude.value = arrays[(arrays.length / 2) - 1].latitude
			longitude.value = arrays[(arrays.length / 2) - 1].longitude
		}


	}
	onLoad((option) => {
		handle_data(option)

		// console.log(instance.ctx,'instance')
		// uni.createMapContext('map_control', map_control).includePoints({
		// 	// markerId: 1,
		// 	// destination: {
		// 	// 	latitude: covers.value[1].latitude,
		// 	// 	longitude: covers.value[1].longitude
		// 	// },
		// 	// duration: 20000,
		// 	points: polyline.value[0].points,
		// 	success: (response) => {
		// 		console.log(response, '成功')
		// 	},
		// 	fail: (error) => {
		// 		console.log(error, 'error')
		// 	}
		// })
	})
	onReady(() => {
		createMapContext.value = uni.createMapContext('map_control', instance)
	})
	onMounted(() => {

	})
</script>

<style lang="scss" scoped>
	.content {
		// width: 100%;
		flex: 1;
		position: relative;
	}

	.bottom_tabbar {
		height: 45px;
		background: #fff;
		position: absolute;
		bottom: 0;
		flex-direction: row;
		padding: 0 40px;
		justify-content: space-between;
		align-items: center;
	}

	.tabbar_list {}

	.scan_posi {}

	.tab_item {
		font-size: 12px;
		margin-top: 3px;
	}

	.pop_bottom {
		height: 200px;
		background: #fff;
		position: absolute;
		bottom: 0;
		left: 0;
		// transform: translate(-50%);
		// z-index: 999;
		border-top-left-radius: 50%;
		border-top-right-radius: 50%;
		// display: flex;
		// flex-direction: column;
		// align-items: center;
		// justify-content: space-evenly;
	}

	.pop_1 {
		// width: 100%;
		// height: 100%;
	}
</style>