smart-tourism/smart-ui-app/pages/travel/route.vue

<template>
	<view>
		<map
			class="map"
			:latitude="item.lat"
			:longitude="item.lng"
			scale="11.3"
			:polyline="polyline"
			:polygons="polygon"
			:markers="markers"
			show-compass="true"
		></map>
	</view>
</template>

<script>
export default {
	data() {
		return {
			item: {},
			tab: [],
			current: 0,
			markers: [],
			polyline: [
				{
					arrowLine: true,
					width: 7,
					color: '#4CAF50',
					points: []
				}
			],
			polygon: [
				{
					strokeWidth: 5,
					strokeColor: '#4CAF50',
					fillColor: '#03a9f482',
					points: []
				}
			],
			circles: [
				{
					strokeWidth: 3,
					color: '#4CAF50',
					fillColor: '#03a9f482'
				}
			]
		};
	},
	onLoad(e) {
		this.getData(e.id);//9
	},
	methods: {
		change(index) {
			this.current = index;
			this.refresh();
		},
		//获取数据
		getData(id) {
			this.$http.request({
				url: this.$http.urls.getMarkerList + id,
				success: res => {
					this.tab = res.data.data.list;
					console.log('asd:' + JSON.stringify(this.tab));
					this.tab.forEach(item => {
						item.locationSet = JSON.parse(item.locationSet);
					});
					this.refresh();
				}
			});
		},
		//刷新数据
		refresh() {
			//this.item = this.tab[this.current];
			this.item.lat=this.tab[0].lat;
			this.item.lng=this.tab[0].lng;
			this.tab.forEach(item => {
				if (item.shapeType == 'polyline') {
					item.locationSet.forEach(l => {
						this.polyline[0].points.push({ latitude: l.lat, longitude: l.lng });
					});
				}
				if (item.shapeType == 'polygon') {
					item.locationSet.forEach(l => {
						this.polygon[0].points.push({ latitude: l.lat, longitude: l.lng });
					});
				}
				if (item.shapeType == 'circle') {
					this.circles[0].latitude = this.item.locationSet.lat;
					this.circles[0].longitude = this.item.locationSet.lng;
					this.circles[0].radius = this.item.radius;
				}
				if (item.shapeType == 'marker') {
					let iconPictures = '';
					if (item.iconPictures != null && item.iconPictures != '') {
						iconPictures = this.$http.urls.ip + item.iconPictures;
					}
					item.locationSet.forEach(l => {
						this.markers.push({
							latitude: l.lat,
							longitude: l.lng,
							iconPath: iconPictures,
							callout: {
								display: 'ALWAYS',
								content: item.markerName,
								padding: 7,
								bgColor: '#4CAF50',
								borderRadius: 5,
								color: '#ffffff'
							}
						});
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
.map {
	position: fixed;
	width: 100%;
	height: 100%;
}
</style>