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"
		id="mapId"
		@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>
		
		<uv-tabs :list="areaList"
		:activeStyle="{color : '#B12026', fontWeight : 600}"
		lineColor="#B12026"
		lineHeight="8rpx"
		lineWidth="50rpx"
		keyName="areaName"
		:current="currentArea"
		@click="clickTabs"></uv-tabs>
		
		
		<!-- '文化遗产', '找厕所', '找美食', '找民宿' -->
		 <!-- v-if="spotGuideIndex != 1" -->
		<view class="Locations-list">
			<view class="main" 
				@click="selectArea"
				v-if="spotGuideIndex == 0 && area">
				<image 
				class="main-image"
				:src="area.areaImage" 
				mode="aspectFill"></image>
				
				<view class="info">
					<view class="title">
						{{ area.areaName }}
					</view>
					<view class="tips">
						{{ spotGuide.length }}个遗产点
					</view>
					<!-- <view class="btn">
						<image src="/static/image/tourGuide/a.png" 
						mode=""></image>
						<text class=""
						@click.stop="textToSpeech(area.areaBrief)">
							语音讲解
						</text>
					</view> -->
				</view>
				
				<view class="controls">
					<!-- <view class="f">
						<image src="/static/image/tourGuide/f.png" mode=""></image>
					</view> -->
					<view class="btn"
					@click.stop="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 && spotGuide.length > 0">
				<view class="main"
				v-for="(item, index) in spotGuide"
				@click.stop="moveTolocation(item.spotLatitude ,item.spotLongitude)"
				:key="index">
					<image 
					class="main-image"
					:src="item.spotImage" 
					@click.stop="toUrl(item)"
					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"
						style="transform: scale(1.3);"
						v-if="item.categoryId != 0">
							<image 
							:src="`/static/image/tourGuide/${item.categoryId}.png`" mode=""></image>
						</view>
						<view class="f">
							<image 
							@click.stop="openLocation(item)"
							src="/static/image/tourGuide/f.png" mode=""></image>
						</view>
						<!-- <view 
						v-if="item.categoryId == 0"
						class="f">
							<image 
							@click.stop="textToSpeech"
							src="/static/image/tourGuide/a.png" mode=""></image>
						</view> -->
					</view>
				</view>
			</view>
			
			<uv-empty
			v-else
			text="该景区没有哦"
			textSize="30rpx"
			iconSize="200rpx"
			icon="list"></uv-empty>
		</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', 'area'],
		data() {
			return {
				latitude: 23.106574, //纬度
				longitude: 113.324587, //经度
				scale: 12, //缩放级别
				show : true,
				context : uni.createInnerAudioContext(),
				tabs : ['文化遗产', 
				// '路径定制', 
				'找美食'
				, '找民宿', '找厕所'],
				areaList : [],
				currentArea : 0,
			}
		},
		computed : {
			// ...mapGetters(['spotGuide', 'spotGuideMarkers']),
			...mapState(['position', 'spotGuideIndex', 'areaId']),
		},
		created() {
			this.queryAreaList()
		},
		methods: {
			//点击tab栏
			clickTabs({ index, name }) {
				this.currentArea = index
				this.$store.commit('setAreaId', this.areaList[index].id)
				this.$emit('getData')
			},
			// 修改前选择的菜单，0-景点 1-美食店铺 2-民宿 3-厕所
			setSpotGuideIndex(index){
				this.$store.commit('setSpotGuideIndex', index)
			},
			textToSpeech(){
				console.log('textToSpeech');
				
				let self = this
				
				// self.context.src = this.$config.baseUrl + '/info/textToAudio?text=' + "你好"
				// self.context.play()
				
				// return
				
				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("markertap===你点击了标记点===", e)
				
				let spot = this.spotGuideMarkers[e.markerId]
				
				this.toUrl(spot)
				
				// uni.openLocation({
				// 	latitude: spot.latitude,
				// 	longitude: spot.longitude,
				// })
				
				// BYCLICK隐藏
				// ALWAYS显示
				
				// this.$store.commit('setDisplay', 
				// this.spotGuideMarkers[e.markerId].id)
				
				
				// this.$forceUpdate()
				
				// this.spotGuideMarkers.forEach((n, i) => {
				// 	if(i == e.markerId){
				// 		// 显示气泡
				// 		n.callout.display = 'ALWAYS'
				// 	}else{
				// 		// 隐藏气泡
				// 		n.callout.display = 'BYCLICK'
				// 	}
				// })
			},
			openLocation(n){
				uni.openLocation({
					latitude: n.spotLatitude,
					longitude: n.spotLongitude,
				})
			},
			//地图点击事件
			callouttap(e) {
				console.log('callouttap地图点击事件', e)
				let spot = this.spotGuideMarkers[e.markerId]
				uni.openLocation({
					latitude: spot.latitude,
					longitude: spot.longitude,
				})
			},
			toUrl(item){
				if(item.categoryId == 0){
					this.$utils.navigateTo(`/pages_order/service/articleDetail?id=${item.id}&type=Inheritance`)
				}
			},
			queryAreaList(){
				this.$api('queryAreaList', res => {
					if(res.code == 200){
						this.areaList = res.result.records
						
						this.areaList.forEach((n, i) => {
							if(this.areaId == n.id){
								this.currentArea = i
							}
						})
					}
				})
			},
			// 点击按钮将地图中心移动到指定定位点
			moveTolocation(latitude, longitude){
				let mapObjs = uni.createMapContext('mapId', this)
				mapObjs.moveToLocation(
				{
					latitude,
					longitude
				},
				{
					complete: res=>{
						console.log('移动完成:', res)
					}
				})
				// this.onRegionChange('',true)
			},
			// 点击景区，选择最近的一个景点
			selectArea(){
				let item = this.spotGuide[0]
				if(item && item.spotLatitude && item.spotLongitude){
					this.moveTolocation(item.spotLatitude, item.spotLongitude)
				}
			},
		}
	}
</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>