ddcCzrWechat/pages/rent/control/routeDetail.vue

<template>
	<map class="map" id="map" ref="map1" :polyline='carRouteList' :markers="markers"></map>
</template>

<script>
	import {
		getRouterDetail
	} from '@/api/rent.js';
	export default {
		data() {
			return {
				// 路线图
				carRouteList: [],
				id: 0,
				map: '',
				markers: [],
			};
		},
		onLoad: function(option) {
			this.id = option.id
		},
		onReady() {
			this.info()
		},
		methods: {
			// 获取路径详细
			info() {
				getRouterDetail({
					id: this.id,
					type: 'record'
				}).then((e) => {
					let data = [{
						points: [],
						color: '#0BBB62',
						width: 5,
						arrowLine: true
					}]
					const startRouter = data[0];
					
					e.data.location.forEach((e) => {
						const address = e.split(',');
						startRouter.points.push({
							longitude: +address[0],
							latitude: +address[1]
						})
					})
					this.carRouteList = data;
					const item0 = startRouter.points[0];
					const item1 = startRouter.points[startRouter.points.length - 1];
					this.markers = [{
						id: 1,
						longitude: item0.longitude,
						latitude: item0.latitude,
						iconPath: '../static/stImg.png',
						width: 30,
						height: 30
					}, {
						id: 2,
						longitude: item1.longitude,
						latitude: item1.latitude,
						iconPath: '../static/endImg.png',
						width: 30,
						height: 30
					}]

					this.map = uni.createMapContext("map", this);
					this.map.includePoints({
						padding: [100, 20, 300, 20],
						points: startRouter.points
					})
				})
			}
		}
	};
</script>

<style>
	.map {
		height: 100vh;
		width: 750rpx;
	}
</style>