IHG/pages/map/map - 副本.vue

<template>
	<view class="map">
		<!-- 查询 -->
		<view class="address">
			<view style="width: 750rpx; height:1200rpx;">
				<map subkey='CQIBZ-P2MR5-PM3IB-QRKTX-SEVJE-GYF34' id="map" class="maps"
					@regionchange="onMapRegionChange" @tap="onMapTap" @markertap="onmarkertap" enable3D="true"
					enableBuilding="true" enableScroll="true" enableZoom="true" :latitude="latitude"
					:layerStyle="mapStyle" :longitude="longitude" :showCompass="false" :showLocation="true"
					:showScale="false" :scale="scale" :markers="markers"></map>
			</view>
		</view>
		<tab-bar></tab-bar>
	</view>
</template>

<script>
	import TabBar from '../../components/TabBar/tabbar.vue'
	import HchPosition from '../../components/hch-position/hch-position.vue'
	export default {
		components: {
			TabBar,
			HchPosition
		},
		data() {
			return {
				latitude: 39.924361, //中心纬度
				longitude: 116.518557, //中心经度
				mapStyle: 1, //个性化地图
				scale: 16,//缩放级别
				markers:[],//标记点
			}
		},

		onLoad() {
			//获取酒店列表
			this.getList()
			this.updated()
		},

		methods: {
			//获取用户定位
			updated() {
				let _this = this
				wx.getLocation({
					type: "gcj02", //返回可以用于wx.openLocation的经纬度
					success: function(res) {
						_this.latitude = res.latitude
						_this.longitude = res.longitude
					},
					fail: function(res) {
						console.log(res);
					}
				})
			},
			//视野发生变化时触发
			onMapRegionChange: function(e) {
				// var t = e.causedBy, r = e.type, i = e.detail.region;
				// if (("drag" == t || "scale" == t) && "end" == r) {
				//     for (var n = i.northeast, o = i.southwest, l = this.data.markersSource, s = [], c = 0, u = l.length; c < u; c++) {
				//         var d = l[c], g = d.latitude, p = d.longitude;
				//         !d.load && g > o.latitude && g < n.latitude & p > o.longitude && p < n.longitude && (d.load = !0, 
				//         s.push(d));
				//     }
				//     a.addMarkers({
				//         markers: s,
				//         clear: !1
				//     });
				// }
			},
			//点击地图时触发
			onMapTap: function(e) {},
			//点击标记点时触发
			onmarkertap: function(e) {
				var t = e.detail.markerId;
				wx.vibrateShort({
					type: "light"
				});
				var a = this.data,
					r = a.swiperCurrent;
				a.markersSource;
				this.updateActiveMarker(r, t), this.setData({
					swiperCurrent: t
			 });
			},
			getList() {
				this.$api.hotel.getHotelList({
					page: 1
				}).then(res => {
					this.hotelList = res.data.data
					console.log(this.hotelList);
					this.markers = this.hotelList.map(item => {
						return {
							id: item.id,
							latitude: item.latitude,
							longitude: item.longitude,
							width: '34rpx',
							height: '40rpx',
							iconPath: '/../../static/navigation.png',
							callout: {
								content: item.name,
								borderRadius: 10,
								padding: 10,
								display: "ALWAYS",
							}
						}
					})
					console.log(this.markers);
				})
			},
			//去预定页面
			goBook() {
				uni.navigateTo({
					url: '/pages/map/hotel-book/index'
				})
			},
			//返回上一级
			returnBtn() {
				this.isShow = !this.isShow
			},
			//打开酒店列表
			goHotelList() {
				console.log(111);
				this.isShow = !this.isShow
			},
			//是否展示加盟品牌
			selectJoin() {
				this.isJoin = !this.isJoin
			},
			//是否展示合作伙伴
			selectPartner() {
				this.isPartner = !this.isPartner
			},
			//合作伙伴刷选
			change(e) {
				console.log('e:', e);
			},
			//菜单index切换
			checked(index) {
				this.isActive = index
			},
			//展开地区选择
			openArea() {
				console.log(111);
				this.isSelectArea = !this.isSelectArea
			},
			//展开品牌选择
			openBrand() {
				this.isSelectBrand = !this.isSelectBrand
			},
			//展开筛选选择
			openSift() {
				this.isSelectSift = !this.isSelectSift
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}

	.map {
		height: 100%;
		background-color: #f9f9f9;
		display: flex;
		flex-direction: column;
	}

	.maps {
		width: 100%;
		height: 1200rpx;
	}

	.return-btn {
		position: fixed;
		right: 0;
		top: 927rpx;
		z-index: 99;
	}

	.home-bottom {
		height: 60rpx;
		background-color: #f9f9f9;
	}

	.hotel-list {
		width: 100%;
		background-color: #f9f9f9;
		padding: 32rpx 30rpx;
		padding-bottom: 200rpx;

		.hotel-list-item {
			width: 100%;
			margin-bottom: 20rpx;

			.wrap {
				width: 100%;
				height: 318rpx;
				position: relative;
				box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.08);
				border-radius: 10rpx;

				.inner {
					width: 100%;
					height: 318rpx;
					border-radius: 10rpx;
					background: rgba(0, 0, 0, 0.4);
					position: absolute;
					z-index: 2;
					top: 0;
					left: 0;

					.address-detail-main {
						position: absolute;
						left: 0;
						bottom: 30rpx;
						width: 100%;
						display: flex;
						align-items: flex-end;
						justify-content: space-between;

						.address-detail-main-left {
							position: absolute;
							left: 20rpx;

							.title {
								font-size: 32rpx;
								font-weight: bold;
								color: #FFFFFF;
							}

							.content {
								margin: 12rpx 0 20rpx;
								width: 92rpx;
								height: 34rpx;
								background: rgba(142, 160, 166, .6);
								border-radius: 17rpx;
								color: #ffffff;
								font-size: 22rpx;
								display: flex;
								align-items: center;
								justify-content: center;
							}

							.bottom {
								display: flex;
								align-items: center;
								justify-content: flex-start;

								.bottom-left {
									font-size: 24rpx;
									font-weight: bold;
									color: #ffffff;
									margin-right: 6rpx;
								}

								.bottom-right {
									font-size: 32rpx;
									font-weight: bold;
									color: #ffffff;
								}
							}
						}

						.address-detail-main-right {
							position: absolute;
							right: 24rpx;
							width: 120rpx;
							height: 44rpx;
							background: #FF6300;
							box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.08);
							border-radius: 22rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							color: #ffffff;
							font-size: 28rpx;
						}
					}

					.address-detail-position {
						position: absolute;
						top: 22rpx;
						right: 24rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-weight: 500;
						color: #FFFFFF;
						font-size: 20rpx;
					}
				}
			}


		}
	}

	.search-detail {
		width: 100%;
		position: absolute;
		top: 88rpx;
		z-index: 999 !important;
		background-color: #ffffff;
		box-shadow: 0px 12rpx 16rpx 0px rgba(220, 222, 229, 0.4);
		padding: 20rpx 30rpx 20rpx;

		.partner {
			.partner-top {
				height: 88rpx;
				border-top: 2rpx solid #F0F0F0;
				border-bottom: 2rpx solid #F0F0F0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #333;
				font-size: 28rpx;
			}

			.partner-main {
				margin-top: 32rpx;

				::v-deep .uni-data-checklist .checklist-group .checklist-box {
					width: 26%;
				}

				::v-deep .uni-data-checklist .checklist-group .checklist-box .checkbox__inner {
					width: 48rpx;
					height: 48rpx;
				}

				::v-deep .uni-data-checklist .checklist-group .checklist-box .checkbox__inner .checkbox__inner-icon {
					top: 6rpx !important;
					left: 17rpx !important;
					height: 24rpx !important;
					width: 15rpx !important;
					border-right-color: #ff6200;
					border-bottom-color: #ff6200;
				}

				::v-deep .uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .checklist-text {
					color: #666 !important;
					font-size: 24rpx !important;
				}

				::v-deep .checklist-text {
					font-size: 24rpx !important;
				}

				::v-deep .uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .checkbox__inner {
					border-color: #EDEDED !important;
					background-color: #ffffff;
				}
			}
		}

		.search-detail-area {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-items: center;

			.areaTitle {
				width: 156rpx;
				height: 56rpx;
				background: #FFFFFF;
				border: 2rpx solid #EDEDED;
				border-radius: 28rpx;
				font-size: 28rpx;
				color: #666;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 20rpx;
				margin-bottom: 18rpx;

				&:nth-child(4n) {
					margin-right: 0;
				}
			}

			// .areaTitle-item {
			// 	width: 156rpx;
			// 	height: 56rpx;
			// 	background-color: #F1F1F1;
			// 	border-radius: 26rpx;
			// 	font-size: 24rpx;
			// 	color: #999;
			// 	display: flex;
			// 	justify-content: center;
			// 	align-items: center;
			// }
			.active-area {
				width: 156rpx;
				height: 56rpx;
				border-radius: 28rpx;
				background-color: #FF6200;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.search-detail-btn {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 38rpx 0 20rpx;

			.search-detail-btn-left {
				flex: 1;
				height: 76rpx;
				background: rgba(237, 237, 237, .55);
				border-radius: 8rpx;
				color: #999999;
				font-size: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: bold;

			}

			.search-detail-btn-right {
				flex: 1;
				height: 76rpx;
				background: linear-gradient(270deg, #FF6200 0%, #FF9342 100%);
				border-radius: 8rpx;
				color: #FFFFFF;
				font-size: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 22rpx;
				font-weight: bold;
			}

		}

		::v-deep .u-input {
			width: 690rpx !important;
			height: 68rpx !important;
			background: #F1F1F1;
			border-radius: 74rpx;
		}

		::v-deep .u-input__content__field-wrapper {
			padding-left: 36rpx;
		}
	}


	.search-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.search {
		position: relative;
		flex: none;
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0px 12rpx 16rpx 0px rgba(220, 222, 229, 0.4);
		display: flex;
		flex-direction: column;
		align-items: inherit;
		justify-content: space-between;

		.search-loupe {
			flex: none;
			width: 60rpx;
			height: 60rpx;
			background: #FFFFFF;
			border-radius: 50%;
			border: 2rpx solid #EDEDED;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 16rpx;
		}

		.search-area-all {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.search-areaClick {
				padding: 12rpx 22rpx;
				height: 52rpx;
				background: #FFFFFF;
				border-radius: 26rpx;
				border: 2rpx solid #FF6200;
				font-weight: 500;
				color: #FF6200;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 16rpx;

				text {
					margin-right: 8rpx;
				}
			}

			.search-area {
				padding: 12rpx 22rpx;
				height: 52rpx;
				background: #FFFFFF;
				border-radius: 26rpx;
				border: 2rpx solid #EDEDED;
				font-weight: 500;
				color: #666666;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 16rpx;

				text {
					margin-right: 8rpx;
				}
			}
		}

	}

	.address-nav {
		position: absolute;
		width: 100%;
		bottom: 34rpx;
		padding: 0 16rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		overflow-x: scroll;

		.address-nav-btn {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

	}

	.address {
		flex: 1;
		position: relative;

		.address-detail {
			position: relative;
			flex: none;
			width: 496rpx;
			border-radius: 10rpx;
			margin-right: 16rpx;

			&:last-child {
				margin-right: 0rpx;
			}

			.inner {
				width: 100%;
				height: 318rpx;
				border-radius: 10rpx;
				background: rgba(0, 0, 0, 0.4);
				position: absolute;
				z-index: 2;
				top: 0;
				left: 0;

				.address-detail-main {
					position: absolute;
					left: 0;
					bottom: 30rpx;
					width: 100%;
					display: flex;
					align-items: flex-end;
					justify-content: space-between;

					.address-detail-main-left {
						position: absolute;
						left: 20rpx;

						.title {
							font-size: 32rpx;
							font-weight: bold;
							color: #FFFFFF;
						}

						.content {
							margin: 12rpx 0 20rpx;
							width: 92rpx;
							height: 34rpx;
							background: rgba(142, 160, 166, .6);
							border-radius: 17rpx;
							color: #ffffff;
							font-size: 22rpx;
							display: flex;
							align-items: center;
							justify-content: center;
						}

						.bottom {
							display: flex;
							align-items: center;
							justify-content: flex-start;

							.bottom-left {
								font-size: 24rpx;
								font-weight: bold;
								color: #ffffff;
								margin-right: 6rpx;
							}

							.bottom-right {
								font-size: 32rpx;
								font-weight: bold;
								color: #ffffff;
							}
						}
					}

					.address-detail-main-right {
						position: absolute;
						right: 24rpx;
						width: 120rpx;
						height: 44rpx;
						background: #FF6300;
						box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.08);
						border-radius: 22rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #ffffff;
						font-size: 28rpx;
					}

				}

				.address-detail-position {
					position: absolute;
					top: 22rpx;
					right: 24rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: 500;
					color: #FFFFFF;
					font-size: 20rpx;
				}
			}


		}
	}
</style>