tourism/uni_applet/pageA/food/fondMap.vue

<template>
	<view>
		<map style="width: 100%; height: 100vh;" :show-location='true' ref="map" id="map" :latitude="latitude"
			:longitude="longitude" :markers="marker" :scale="scale" @callouttap='callouttap' @regionchange='regionChange'>
		</map>
		<view class="floatBtn" :style="{bottom:(currentHeight+20)+'px'}" @click="onControltap">
			<view class="header-avatar">
			<image class="cover-image" src="@/static/image/food/dw.png"></image>
			</view> 
		</view>
		<bab-Touchbox :minHeight="0.25" :maxHeight="0.7" :touchHeight="40" @currentHeight="setScrollHeight"
			@maxtHeight="setScrollViewHeight">
			<view class="flexRow">
				<view class="head">
					<view v-for='item in jobs' @click="change(item)" class="item" :class="item.checked?'item-active':''">
						{{item.iname}}
					</view>
				</view>
			</view>
			<scroll-view :style="{'height':scrollViewHeight - 64 +'px'}" scroll-y="true" class="info-list">
				<view class="item" v-for="(item,index) in mapList" @click="toMap(item,index)">
					<view class="left">
						<image :src="item.coverImage" mode="aspectFill" class="img"></image>
					</view>
					<view class="right row1">
						<view class="title">
							{{item.shopNames}}
						</view>
						<view class="row2" v-if="item.label">
							<view v-for="item1 in item.label.split(',')" class="label">
								{{item1}}
							</view>
						</view>
			
						<view class="row3" @click.stop="toDL(item)">
							<view class="to-here">
								<image src="../../static/image/to.png" mode="widthFix" style="width: 36rpx;">
								</image>
							</view>
							<view class="detailedAddress">
								{{item.detailedAddress}}
							</view>
			
						</view>
					</view>
				</view>
			</scroll-view>
	<!-- 		<scroll-view :style="{'height':scrollViewHeight - 64 +'px'}" scroll-y="true">
				<view style="background-color: #4CD964;">
					<view><text>绿色高度(滚动区域高度) = </text><text>@maxtHeight返回值 - touchHeight值</text></view>
					<list>
						<cell v-for="(item, index) in 50" :key="index">
							<text>就是个地理位置{{index+1}}</text>
						</cell>
					</list>
				</view>
			</scroll-view> -->
		</bab-Touchbox>
	</view>
</template>

<script>
	var that;
	import {
		authorizedLocation
	} from '@/util/util.js'
	export default {
		data() {
			return {
				searchKeyWord:'',
				currentHeight: 0, // 滑动组件当前高度
				scrollViewHeight: 0, //用于计算滚动区域高度
				topHeight: 20,
				tag: false,
				latitude: '', //纬度
				longitude: '', //经度
				movelatitude: '', //纬度
				movelongitude: '', //经度
				scale: 14, //缩放级别
				current: 1,
				marker: [],
				pageSize: 10,
				pageNum: 1,
				total: 0, // 总数据量
				markerIdClick: [],
				mapList: [],
				jobs: [
					{
						id: 0,
						iname: '全部',
						checked: true
					},
					{
						id: 1,
						iname: '海鲜',
						checked: false
					},
					{
						id: 2,
						iname: '自助',
						checked: false
					}, {
						id: 3,
						iname: '烧烤',
						checked: false
					},
					{
						id: 4,
						iname: '火锅',
						checked: false
					},
					{
						id: 5,
						iname: '家常菜',
						checked: false
					},
					{
						id: 6,
						iname: '面食',
						checked: false
					},
					{
						id: 7,
						iname: '小龙虾',
						checked: false
					},
					{
						id: 8,
						iname: '早餐',
						checked: false
					}
				],

			}
		},
		watch: {},
		 onLoad(options) {
			that = this
			 this.isdingwei()
		},

		computed: {
			windowHeight() {
				var systemInfo = uni.getSystemInfoSync();
				return systemInfo.windowHeight;
			},
			windowWidth() {
				return uni.getSystemInfoSync().windowWidth;
			}
		},
		methods: {
			toMap(val,index){
				console.log(this.marker)
				console.log(val)
				for(let i = 0;i<this.marker.length;i++){
					if(val.id==this.marker[i].id){
						this.marker[i].width = 30
						this.marker[i].height = 30
					}else{
						this.marker[i].width = 20
						this.marker[i].height = 20
					}
				}
			},
			change(val){
				this.searchKeyWord = val.iname
				if(this.searchKeyWord=='全部') this.searchKeyWord = ''
				for(let i = 0;i<this.jobs.length;i++){
					if(val.iname==this.jobs[i].iname){
						this.jobs[i].checked = true
					}else{
						this.jobs[i].checked = false
					}
				}
				this.getStationList()
				
			},
			async regionChange(e) {
				if(e.type=="end"&&e.causedBy=='drag'){
					console.log(e)
					 let _centerLocation = await this.getCenterLocation()
					this.movelongitude = _centerLocation.longitude
					this.movelatitude = _centerLocation.latitude
					this.getStationList()
				}
			},
			//移动到当前位置
			onControltap() {
				uni.createMapContext("map", this).moveToLocation();
			},
			toDL(val) {
				console.log(val)
				let _latitude = val.location.split(",")[0]
				let _longitude = val.location.split(",")[1]
				uni.openLocation({
					latitude: Number(_latitude),
					longitude: Number(_longitude),
					success: function() {
						console.log('success');
					},
					fail(fail) {
						console.log(fail)
					},
				});
			},
			getCenterLocation() {
				return new Promise((resolve, reject) => {
					// 获取地图中心经纬度
					let mapObjs = uni.createMapContext("map",that)
					mapObjs.getCenterLocation ({
						success:function(res){
							console.log("中心经纬度",res)
							resolve(res)
						},
						fail:function(fail) {
							reject(fail)
						}
					});
				})
			},
			getList() {
				return new Promise((resolve, reject) => {
					uni.showLoading({
						mask:true,
						title: '加载中'
					})
					this.$request.baseRequest('admin.tourism.foodInfo', 'foodList', {
						page: 1,
						limit: 100,
						userLongitude: this.movelongitude,
						userLatitude: this.movelatitude,
						searchKeyWord: this.searchKeyWord,
						searchType:2
					}, failres => {
						uni.showToast({
							icon: "none",
							title: failres.errmsg,
							duration: 3000
						});
			
					}).then(res => {
						uni.hideLoading()
						resolve(res)
					})
				})
			},
			async getStationList() {
				this.mapList = []
				const data = await this.getList()
				console.log('queryStationInfos，信息列表显示总数据', data);
				this.total = data.total
				data.data.items.forEach(item => {
					item.latitude = item.location.split(',')[0]
					item.longitude = item.location.split(',')[1]
					this.marker.push({
						id: Number(item.id),
						iconPath: '/static/image/food/location.png', //显示的图标
						latitude: Number(item.latitude),
						longitude: Number(item.longitude),
						// label: {
						// 	content: item.shopNames,
						// 	textAlign: "left",
						// 	padding: -20
						// },
						width: 20,
						height: 20,
						callout: { //气泡窗口 
							content: item.shopNames, //文本
							// color: '#ffffff',
							fontSize: 14,
							// borderRadius: 15,
							// padding: '10',
							bgColor: 'transparent',
							display: 'ALWAYS', //常显
							anchorX: 32,
							anchorY: 28
						}
					})
				})
				this.mapList = this.mapList.concat(data.data.items)
				console.log(this.marker);
			},
			isdingwei() {
				authorizedLocation().then(res => {
					let _obj = {}
					if (res == '取消授权') {
						//获取上一次，无上一次山海广场
						let _place = uni.getStorageSync("LocationPlace")
						if (_place && _place.latitude) {
							_obj = {
								latitude: _place.latitude,
								longitude: _place.longitude
							}
						} else {
							_obj = {
								latitude: 40.22086204872,
								longitude: 122.08338497727
							}
						}
			
					} else {
						_obj = {
							latitude: res.latitude,
							longitude: res.longitude
						}
					}
					this.longitude = _obj.longitude
					this.latitude = _obj.latitude
					this.movelongitude = _obj.longitude
					this.movelatitude = _obj.latitude
					this.getStationList()
			
				})
			},
			setScrollHeight(val) { // 实时返回的滑动组件高度
				this.currentHeight = val
				console.log(this.currentHeight)
			},
			setScrollViewHeight(val) { //最大高度
				this.scrollViewHeight = val
			},
		}
	}
</script>

<style lang="scss" scoped>
	.header-avatar {
		width: 80rpx;
		height: 80rpx;
		background-color: #fff;
		border-radius: 100px;
		display: fixed;
		align-items: center;
		justify-content: center;
		.cover-image {
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			top: 15rpx;
			left: 15rpx;
		
		}
	}

	.floatBtn {
		position: fixed;
		right: 40rpx;
		z-index: 10;
	}

	.flexRow {
		
		.head {
			margin: 20rpx 0;
			white-space: nowrap;
			overflow-x: scroll;
			width: calc(100vw - 40rpx);
		
			box-sizing: border-box;
		
			.item {
				display: inline-block;
				background: #e9eaec;
				color: #566068;
				padding: 10rpx 26rpx;
				margin-right: 20rpx;
				border-radius: 20rpx;
				font-size: 24rpx;
			}
			.item-active {
				display: inline-block;
				background:#f9ae3d ;
				color: #fff;
				// padding: 10rpx 26rpx;
				// margin-right: 20rpx;
				// border-radius: 20rpx;
				// font-size: 24rpx;
			}
		}
	}
	.info-list {
		// background-color: red;
		margin-top: 20rpx;
		width: calc(100vw - 40rpx);
	
		.item {
			background: #fff;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			display: flex;
			padding: 20rpx;
			box-sizing: border-box;
	
			.img {
				width: 160rpx;
				height: 160rpx;
				border-radius: 30rpx;
			}
	
			.right {
				margin-left: 20rpx;
				width: 100%;
	
				.title {
					font-weight: 700;
				}
	
				.row2 {
					display: flex;
					margin-top: 10rpx;
	
					.label {
						background: #fdf6ec;
						color: #f9ae3d;
						border-radius: 20rpx;
						padding: 6rpx 16rpx;
						font-size: 24rpx;
						margin-right: 20rpx;
	
					}
				}
	
				.row3 {
					position: relative;
					display: flex;
					width: 100%;
					margin-top: 10rpx;
					align-items: top;
	
					.detailedAddress {
						width: 60vw;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}
		}
	}
</style>