tqApp-webView/pagesMap/viewRoute/viewRoute.vue

<template>
	<view class="page-container">
		<map-container
			ref="mapContainerRef"
			@onload="handleOnload"
			:markerClusterOptions="{
				maxZoom: 1,
			}"
		>
		</map-container>
		
	</view>
</template>

<script>
import MapContainer from '@/components/MapContainer'
import {routeDetail} from '@/api/common/system.js'
import {isEmpty} from 'lodash'
export default {
	components: {
		MapContainer,
	},
	computed: {
		
	},
	data() {
		return {
			id: '',
			pointList: [],
		}
	},
	onLoad(option) {
		const {id} = option
		if(id) {
			this.id = id
		}
	},
	onShow() {
		
	},
	onHide() {
		
	},
	onReady() {
		
	},
	methods: {
		async getRouteDetail(id) {
			let {code,data} = await routeDetail({id})
			if(code == 0) {
				this.pointList = data.pointList
				
				if(!isEmpty(this.pointList)) {
					let getPath = []
					 this.pointList.forEach((item) => {
						  getPath.push([item.lng,item.lat])
					  })
					if(this.$refs.mapContainerRef) {
						let polyline = this.$refs.mapContainerRef.createPolyline(getPath,{
						       
						})
						
						this.$refs.mapContainerRef.setFitView(polyline, false, [40, 200, 20, 20])
					}
				}
			}
		},
		handleOnload(map) {
			this.map = map
			this.getRouteDetail(this.id)
		},
		
	}
}
</script>

<style lang="scss" scoped>
.page-container {
	background: #fff;
	font-size: 28rpx;
	
	height: 100vh;
	position: relative;
	.footer {
		padding: 10rpx 0;
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
	}
}	


::v-deep {
	
	.u-form-item__body {
		padding: 0;
	}
	.hidde-cell-title {
		
		.u-cell__body__content {
			width: auto;
			flex: none;
			
		}
		.u-cell__body {
			.value {
				flex: 1;
			}
		}
		
	}
	
}
</style>