Jingde-town-wechat-uniapp/components/tourGuide/locations.vue

<template>
	<view class="Locations">
		
		<map 
		style="width: 100%;height: 60vh" 
		:layer-style='5' 
		:show-location='true'
		:latitude="position.latitude" 
		:longitude="position.longitude" 
		:markers="spotGuideMarkers" 
		:scale="scale" 
		@markertap="markertap"
		@callouttap='callouttap'>
		</map>
		
		<view class="tabs">
			<view class=""
			v-for="(item, index) in tabs"
			:key="index"
			@click="setSpotGuideIndex(index)"
			:class="{act : spotGuideIndex == index}">
				{{ item }}
			</view>
		</view>
		
		
		<!-- '文化遗产', '找厕所', '找美食', '找民宿' -->
		<view class="Locations-list" v-if="spotGuideIndex != 1">
			<view class="main" v-if="spotGuideIndex == 0">
				<image 
				class="main-image"
				src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msKSi.img" 
				mode="aspectFill"></image>
				
				<view class="info">
					<view class="title">
						陶阳里景区
					</view>
					<view class="tips">
						6个遗产点
					</view>
					<view class="btn">
						<image src="/static/image/tourGuide/a.png" 
						mode=""></image>
						<text class=""
						@click="textToSpeech">
							语音讲解
						</text>
					</view>
				</view>
				
				<view class="controls">
					<view class="f">
						<image src="/static/image/tourGuide/f.png" mode=""></image>
					</view>
					<view class="btn"
					@click="show = !show">
						<text class="">
							{{ show ? '收起' : '展开' }}
						</text>
						<uv-icon
						:name="show ? 'arrow-up' : 'arrow-down'"
						size="30rpx"></uv-icon>
					</view>
				</view>
			</view>
			<view class="list"
			v-if="show">
				<view class="main"
				v-for="(item, index) in spotGuide"
				:key="index">
					<image 
					class="main-image"
					:src="item.spotImage" 
					mode="aspectFill"></image>
					
					<view class="info">
						<view class="title">
							{{ item.spotName }}
						</view>
						<view class="tips" v-if="item.distance > 1">
							距离您{{ item.distance }}km
						</view>
						<view class="tips" v-else>
							距离您{{ item.distance * 1000 }}m
						</view>
					</view>
					
					<view class="controls">
						<view class="f">
							<image 
							@click="openLocation(item)"
							src="/static/image/tourGuide/f.png" mode=""></image>
						</view>
						<view class="f">
							<image 
							@click="textToSpeech"
							src="/static/image/tourGuide/a.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<!-- '路径定制', -->
	</view>
</template>

<script>
	// var plugin = requirePlugin("WechatSI")
	
	// "plugins" : {
	//     "WechatSI" : {
	//         "version" : "0.3.1",
	//         "provider" : "wx069ba97219f66d99"
	//     }
	// }
	import { mapState, mapGetters } from 'vuex'
	export default {
		props : ['spotGuide', 'spotGuideMarkers'],
		data() {
			return {
				latitude: 23.106574, //纬度
				longitude: 113.324587, //经度
				scale: 12, //缩放级别
				show : true,
				context : uni.createInnerAudioContext(),
				tabs : ['文化遗产', '路径定制', '找厕所', '找美食', '找民宿'],
			}
		},
		computed : {
			// ...mapGetters(['spotGuide', 'spotGuideMarkers']),
			...mapState(['position', 'spotGuideIndex']),
		},
		methods: {
			// 修改前选择的菜单，0-景点 1-美食店铺 2-民宿 3-厕所
			setSpotGuideIndex(index){
				this.$store.commit('setSpotGuideIndex', index)
			},
			textToSpeech(){
				console.log('textToSpeech');
				
				let self = this
				
				plugin.textToSpeech({
				    lang: "zh_CN",
				    tts: true,
				    content: "景德镇市陶阳里御窑景区位于景德镇的城市中心地带，北起瓷都大桥、昌江大道，南至昌江大桥、西至沿江西路，东至莲社路、胜利路。 自宋以来，景德镇先民“沿河建窑，因窑成市”，渐呈“码头—民窑—老街—里弄—御窑”聚落的历史空间和瓷业肌理，形成了世界建筑史上绝无仅有的老城格局，成就了中国“东方瓷国”的盛誉，陶瓷成为了中国走向世界，世界认识中国的文化符号。这里是景德镇历史上制瓷业的中心、原点和高峰，是“一带一路”海上陶瓷之路的零公里起点，是研究皇家御窑制瓷历史文化和景德镇陶瓷技艺，讲好景德镇故事，传播中国声音的“窗口”和“名片”。",
				    success: function(res) {
						self.context.src = res.filename;
						self.context.play()
				    },
				    fail: function(res) {
				        console.log("fail tts", res)
				    }
				})
			},
			//地图点击事件
			markertap(e) {
				console.log("===你点击了标记点===", e)
				this.spotGuideMarkers.forEach(n => {
					if(n.id == e.detail.markerId){
						uni.openLocation({
							latitude: n.latitude,
							longitude: n.longitude,
						})
					}
				})
			},
			openLocation(n){
				uni.openLocation({
					latitude: n.spotLatitude,
					longitude: n.spotLongitude,
				})
			},
			//地图点击事件
			callouttap(e) {
				console.log('地图点击事件', e)
			},
		}
	}
</script>

<style scoped lang="scss">
.Locations{
	
	.tabs{
		display: flex;
		&>view{
			flex: 1;
			margin: 20rpx 10rpx;
			padding: 20rpx 10rpx;
			background-color: #F8E2E2;
			color: #C83741;
			border-radius: 40rpx;
			font-size: 24rpx;
			text-align: center;
		}
		.act{
			background-color: #C83741;
			color: #fff;
		}
	}
	
	.Locations-list{
		.main{
			display: flex;
			margin: 20rpx;
			.main-image{
				width: 150rpx;
				height: 150rpx;
				border-radius: 20rpx;
			}
			.info{
				margin-left: 20rpx;
				.title{
					font-size: 30rpx;
					font-weight: 900;
				}
				.tips{
					font-size: 24rpx;
					color: #999999;
					margin-top: 10rpx;
				}
			}
			.controls{
				margin-left: auto;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.f{
					image{
						width: 50rpx;
						height: 50rpx;
					}
				}
			}
			.btn{
				padding: 10rpx;
				font-size: 22rpx;
				color: $uni-color;
				border: 1rpx solid $uni-color;
				background-color: #F4E4C4;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 10rpx;
				border-radius: 15rpx;
				image{
					width: 25rpx;
					height: 25rpx;
				}
				text{
					margin: 0 10rpx;
				}
			}
		}
		.list{
			padding-left: 40rpx;
			.main{
				align-items: center;
				.main-image{
					width: 140rpx;
					height: 140rpx;
				}
				.controls{
					flex-direction: row;
					.f{
						margin: 30rpx;
						image{
							width: 40rpx;
							height: 40rpx;
						}
					}
				}
			}
		}
	}
}
</style>