上传

components/tourGuide/locations.vue

@@ -1,8 +1,32 @@
 <template>
 	<view class="Locations">
 		
-		<view class="Locations-list">
-			<view class="main">
+		<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" 
@@ -43,26 +67,29 @@
 			<view class="list"
 			v-if="show">
 				<view class="main"
-				v-for="(item, index) in 10"
+				v-for="(item, index) in spotGuide"
 				:key="index">
 					<image 
 					class="main-image"
-					src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msKSi.img" 
+					: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">
-							6个遗产点
+						<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">
@@ -74,6 +101,9 @@
 				</view>
 			</view>
 		</view>
+		
+		
+		<!-- '路径定制', -->
 	</view>
 </template>
 
@@ -86,14 +116,28 @@
 	//         "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');
 				
@@ -112,12 +156,53 @@
 				    }
 				})
 			},
+			//地图点击事件
+			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;

config.js

@@ -13,10 +13,10 @@ const type = 'dev'
 // 环境配置
 const config = {
 	dev : {
-		baseUrl : 'http://8.138.162.67:8001/travel-api/api',
+		baseUrl : 'https://traveladmin.augcl.com/travel-api/api',
 	},
 	prod : {
-		baseUrl : 'http://8.138.162.67:8001/travel-api/api',
+		baseUrl : 'https://traveladmin.augcl.com/travel-api/api',
 	}
 }
 

pages/index/tourGuide.vue

@@ -1,9 +1,8 @@
 <template>
 	<view class="page">
-		<map 
-		style="width: 100%;" 
+		<!-- <map 
+		style="width: 100%;height: 700rpx" 
 		:layer-style='5' 
-		:style="{height:mapheight}" 
 		:show-location='true'
 		:latitude="latitude" 
 		:longitude="longitude" 
@@ -11,11 +10,12 @@
 		:scale="scale" 
 		@markertap="markertap"
 		@callouttap='callouttap'>
-		</map>
+		</map> -->
 		
-		<view class="content">
-			<locations/>
-		</view>
+		<locations
+		:spotGuide="spotGuide"
+		:spotGuideMarkers="spotGuideMarkers"
+		/>
 		
 		<tabber select="1"/>
 	</view>
@@ -24,17 +24,18 @@
 <script>
 	import position from '@/utils/position.js'
 	import locations from '@/components/tourGuide/locations.vue'
+	import { mapState, mapGetters } from 'vuex'
 	export default {
 		components : {
 			locations,
 		},
 		data() {
 			return {
-				latitude: 23.106574, //纬度
-				longitude: 113.324587, //经度
-				scale: 12, //缩放级别
-				bottomData: false,
-				mapCtx: null,
+				// latitude: 23.106574, //纬度
+				// longitude: 113.324587, //经度
+				// scale: 12, //缩放级别
+				// bottomData: false,
+				// mapCtx: null,
 				markers:[
 					// { //标记点A 的信息
 					// 	iconPath: "/static/logo.png",  //图标
@@ -49,36 +50,12 @@
 			}
 		},
 		onLoad() {
-			position.getLocation(res => {
-				console.log(res);
-				this.latitude = res.latitude
-				this.longitude = res.longitude
-				this.random()
-			})
+			// this.$store.commit('')
+		},
+		onShow(){
 		},
 		computed: {
-			mapheight() {
-				let data = ''
-				if (this.bottomData) {
-					if (this.upTop) {
-						data = '50px'
-					} else {
-						data = '200px'
-					}
-				} else {
-					data = '50vh'
-				}
-				return data
-			},
-			coverbottom() {
-				let data = ''
-				if (this.bottomData) {
-					data = '20rpx'
-				} else {
-					data = '100rpx'
-				}
-				return data
-			}
+			...mapGetters(['spotGuide', 'spotGuideMarkers']),
 		},
 		onShow() {
 			// this.mapCtx = wx.createMapContext('map');

store/store.js

@@ -10,7 +10,6 @@ import Position from '@/utils/position.js'
 const store = new Vuex.Store({
 	state: {
 		configList: [], //配置列表
-		shop : false,
 		position : {//定位信息
 			latitude : 0,
 			longitude : 0,
@@ -34,13 +33,41 @@ const store = new Vuex.Store({
 		],
 		banner : {},
 		cartCheckboxValue : [],//选中的购物车
-		spotList : [],
+		spotList : [],//所有的地点
+		spotGuideIndex : 0,//导览页面当前选择标签
+		areaId : 0,//景区id
 	},
 	getters: {
-		// 角色 true为水洗店 false为酒店
-		userShop(state){
-			return state.shop
-		}
+		spotGuide(state){
+			return state.spotList.filter(n => {
+				
+				let i = state.spotGuideIndex < 2 ?
+				0 : state.spotGuideIndex - 1
+				
+				console.log(i);
+				
+				if(i != n.categoryId){
+					return false
+				}
+				return true
+			})
+		},
+		spotGuideMarkers(state){
+			let list = []
+			
+			state.spotList.forEach(n => {
+				list.push({
+					latitude: n.spotLatitude,
+					longitude: n.spotLongitude,
+					width: 20, //图标icon 宽度
+					height: 28 ,//图标icon 高度
+					iconPath: `/static/image/tourGuide/${n.categoryId}.png`,  //图标
+					id: n.id,
+				})
+			})
+			
+			return list
+		},
 	},
 	mutations: {
 		// 初始化配置
@@ -60,6 +87,11 @@ const store = new Vuex.Store({
 				})
 			})
 		},
+		// 导览页面设置当前选择的菜单，0-景点 1-美食店铺 2-民宿 3-厕所
+		setSpotGuideIndex(state, index){
+			state.spotGuideIndex = index
+		},
+		// 获取所有页面的轮播图
 		getBanner(state){
 			
 			// 0-首页 1-遗产路径 2-我要跟拍 3-非遗体验 4-无忧服务 5申遗历程
@@ -86,6 +118,7 @@ const store = new Vuex.Store({
 					
 					res.result.records.forEach(n => {
 						if(n.spotLatitude && n.spotLongitude){
+							n.distance = 0,
 							spot.push(n)
 						}
 					})