tourism/uni_applet/pageA/food/fondMap.vue

<template>
	<view>
		<view class="map-container">
			<map style="width: 100%; height: 100vh;" :show-location='true' ref="map" id="map" :latitude="latitude"
				:longitude="longitude" :markers="marker" :scale="scale" @callouttap='callouttap' v-if="mapShow">
				<view class="cover-view">
					<view @click="onControltap">
						<image class="cover-image" src="@/static/image/food/dw.png"></image>
					</view>
				</view>
			</map>
		</view>
		<!-- <view class="search" :style="{top:topHeight+'px'}">
			<searchBar @click="search" :city="city"></searchBar>
		</view> -->
		<cardList :stationList="markerIdClick" v-if="tag" style="position: fixed;top: 70%;"></cardList>
		<tabbar :current="current"></tabbar>
	</view>
</template>

<script>
	import {
		authorizedLocation
	} from '@/util/util.js'
	export default {
		data() {
			return {
				mapShow: false,
				topHeight: 20,
				tag: false,
				latitude: '', //纬度
				longitude: '', //经度
				scale: 12, //缩放级别
				current: 1,
				marker: [],
				pageSize: 10,
				pageNum: 1,
				total: 0, // 总数据量
				markerIdClick: [],
				mapList: [],
			}
		},
		async onLoad() {
			this.isdingwei()
			this.getStationList()
			const {
				height,
				top
			} = uni.getMenuButtonBoundingClientRect();
			this.topHeight = height + top + 13
		},
		methods: {
			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

				})
			},
			search(searchInp) {
				console.log('search页面子向父传值', searchInp);
			},
			regionChange() {
				this.tag = false
				if (this.pageNum * this.pageSize >= this.total) return
				this.pageNum++
				this.getStationList()
			},
			//移动到当前位置
			onControltap() {
				uni.createMapContext("map", this).moveToLocation();
			},
			//气泡点击事件
			callouttap(e) {
				let id = String(e.detail.markerId)
				let arr = this.mapList.find(item => {
					return item.stationId === id
				})
				this.markerIdClick = [arr]
				this.tag = true
			},
			getList() {
				return new Promise((resolve, reject) => {
					this.$request.baseRequest('admin.tourism.foodInfo', 'foodList', {
						page: 1,
						limit: 9999,
					}, failres => {
						uni.showToast({
							icon: "none",
							title: failres.errmsg,
							duration: 3000
						});

					}).then(res => {
						uni.hideLoading()
						resolve(res)
					})
				})
			},
			async getStationList() {
				console.log('发送请求前 打印用户经纬度', this.latitude, this.longitude);
				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: 30,
						height: 30,
						// callout: { //气泡窗口 
						// 	content: '空闲', //文本
						// 	color: '#ffffff',
						// 	fontSize: 15,
						// 	borderRadius: 15,
						// 	padding: '10',
						// 	bgColor: '#406390',
						// 	display: 'ALWAYS', //常显
						// }
					})
				})
				this.mapShow = true
				this.mapList = this.mapList.concat(data.data.items)
				console.log(this.marker);
				// for (let index in obj.list) {
				//   let stationMarker = {
				//     iconPath: '/static/images/mapStation.png', //显示的图标 
				//     id: Number(index) || 0,
				//     title: this.mapList[index].stationName || '',
				//     latitude: Number(this.mapList[index].stationLat),
				//     longitude: Number(this.mapList[index].stationLng),
				//     width: 30, 
				//     height: 30, 
				//     callout: { //气泡窗口 
				//       content: '空闲' + this.mapList[index].totalFree, //文本
				//       color: '#ffffff', //文字颜色
				//       fontSize: 15, //文本大小
				//       borderRadius: 15, //边框圆角
				//       padding: '10',
				//       bgColor: '#406390', //背景颜色
				//       display: 'ALWAYS', //常显
				//     }
				//   }
				//   // console.log(stationMarker, 'stationMarker');
				//   this.marker.push(stationMarker)
				// }
			}
		}
	}
</script>

<style scoped lang="scss">
	/deep/ .uni-searchbar__box-search-input {
		color: #fff !important;
	}

	.search {
		position: fixed;
		width: 80%;
	}

	.map-container {
		margin-top: -40rpx;
		position: relative;
		overflow: hidden;
		border-radius: 50rpx 50rpx 0 0;

		.cover-view {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			/* width: 80rpx;
			height: 160rpx; */
			padding: 10rpx 15rpx;
			color: #4F575F;
			font-weight: 400;
			background-color: #fff;
			background-position: center center;
			position: absolute;
			    bottom: 300rpx;
			    right: 30rpx;
			border-radius: 20rpx;


		}

		.cover-image {
			display: inline-block;
			width: 40rpx;
			height: 40rpx;

		}
	}
</style>