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

<template>
	<view>
		<u-tabs :list="tab" name="markerName" active-color="#c74547" :is-scroll="false" :current="current" @change="change"></u-tabs>
		<map class="map" v-if="item.shapeType == 'polyline'" :latitude="item.lat" :longitude="item.lng" scale="13" :polyline="polyline" show-compass="true"></map>
		<map class="map" v-if="item.shapeType == 'polygon'" :latitude="item.lat" :longitude="item.lng" scale="12" :polygons="polygon" show-compass="true"></map>
		<map class="map" v-if="item.shapeType == 'circle'" :latitude="item.lat" :longitude="item.lng" scale="13" :circles="circles" show-compass="true"></map>
		<map class="map" v-if="item.shapeType == 'marker'" :latitude="item.lat" :longitude="item.lng" scale="13" :markers="markers" show-compass="true"></map>
	</view>
</template>

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

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