zd2.0/pages/index/routeDetail.vue

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

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

<style>
	page {
		height: 100%;
	}

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