地图图片尺寸

components/hch-position/hch-position.vue

@@ -58,6 +58,7 @@
 			return {
 				isisMarkering: false,
 				isActiveMarker: 0,
+				isActiveMarkerIndex: -1,
 				latitude: 30.6034799,
 				longitude: 104.1132550,
 				mapStyle: 1, //个性化地图
@@ -141,39 +142,47 @@
 			},
 			//	点击标记点时触发，e.detail = {markerId}
 			markertap(e, mode = true, isQt = false) {
-				if(!isQt && (this.isActiveMarker === e.markerId || this.isMarkering)) return;
 				
+				
+				let index = 0;
+				if(typeof e.index !== 'undefined'){
+					index = e.index;
+				}else if(typeof e.index === 'undefined'){
+					index = e.markerId;
+				}	
+				
+				if(!isQt && (this.isActiveMarkerIndex === index || this.isMarkering)) return;
 				this.isMarkering = true;
 				setTimeout(()=>{
 					this.isMarkering = false
 				}, 200)
-				this.markersIn.forEach((item,index) => {
-					if(e.markerId == item.id){
-						this.isActiveMarker = item.id;
-						item.iconPath = "";
-						item.width="34rpx";
-						item.height = "46rpx";
-						this.latitude = item.latitude
-						this.longitude = item.longitude
-						if(this.painter.wait != 0) return;
-						this.generateImg(item.active.iconPath).then(()=>{
-							// if(this.isActiveMarker != item.id) return;
-							item.width = item.active.width;
-							item.height = item.active.height;
-							item.iconPath = this.painter.path;
-							item.isActive = true;
-							this.$set(this.markersIn, index, item);
-						})
-						this.isUpdate = false
-						mode&&this.$emit('moveToMarkId',e.markerId)
-					}else if(item.isActive||item.iconPath != item.noActive.iconPath){
-						item.width = item.noActive.width;
-						item.height = item.noActive.height;
-						item.iconPath = item.noActive.iconPath;
-						item.isActive = false;
-						this.$set(this.markersIn, index, item);
-					}
+				const itemOld = this.markersIn[this.isActiveMarkerIndex];
+				if(itemOld){
+					itemOld.width = itemOld.noActive.width;
+					itemOld.height = itemOld.noActive.height;
+					itemOld.iconPath = itemOld.noActive.iconPath;
+					itemOld.isActive = false;
+					this.$set(this.markersIn, this.isActiveMarkerIndex, itemOld);
+				}
+				this.isActiveMarkerIndex = index;
+				const item = this.markersIn[this.isActiveMarkerIndex];
+				item.width = item.active.width;
+				item.height = item.active.height;
+				item.iconPath = this.painter.path;
+				item.isActive = true;
+				this.$set(this.markersIn, index, item);
+				this.latitude = item.latitude
+				this.longitude = item.longitude
+				if(this.painter.wait != 0) return;
+				this.generateImg(item.active.iconPath).then(()=>{
+					// if(this.isActiveMarker != item.id) return;
+					item.width = item.active.width;
+					item.height = item.active.height;
+					item.iconPath = this.painter.path;
+					item.isActive = true;
+					this.$set(this.markersIn, index, item);
 				})
+				mode&&this.$emit('moveToMarkId',index);
 			},
 			//点击定位标时触发，e.detail = {longitude, latitude}
 			anchorpointtap(e) {
@@ -192,7 +201,9 @@
 		watch:{
 			'markers': {
 				handler(val,oldVal) {
-					this.markersIn = this.markers.map(item=>{
+					const temp = Object.assign(this.markers);
+					this.markersIn = temp.map((item, index)=>{
+						item.marker.id = index;
 					    return item.marker;
 					})
 				},

pages/map/map.scss

@@ -383,15 +383,10 @@ page {
 	}
 
 	.address-nav {
-		position: absolute;
-		width: 100%;
-		bottom: 34rpx;
+		position: fixed;
+		width: 100%;
+		bottom: 136rpx;
 		padding: 0 8px;
-		// display: flex;
-		// flex-direction: column;
-		// align-items: center;
-		// justify-content: space-between;
-		overflow-x: scroll;
 
 		.address-nav-btn {
 			width: 100%;
@@ -402,7 +397,7 @@ page {
 		
 		.address-nav-button{
 			position: fixed;
-			bottom: 450rpx;
+			bottom: 225px;
 			
 			&:first-child{
 				left:16rpx;
@@ -419,13 +414,14 @@ page {
 		
 
 		.address-detail {
-			display: inline-block;
-			position: relative;
-			flex: none;
-			width: 248px;
-			height: 318rpx;
-			border-radius: 10rpx;
-			margin-right: 8px;
+			display: inline-block;
+			position: relative;
+			flex: none;
+			width: 248px;
+			height: 159px;
+			border-radius: 10rpx;
+			margin-right: 8px;
+			overflow: hidden;
 
 			&:last-child {
 				margin-right: 0rpx;
@@ -433,11 +429,14 @@ page {
 			
 			.mark{
 				height: inherit;
-				width: inherit;
+				width: inherit;
+				overflow: hidden;
+				border-radius: 10rpx;
 				
 				image{
-					width: 100%;
-					height:100%;
+					// width: 100%;
+					height: 159px;
+					width: 342px;
 					border-radius: 10rpx;
 				}
 			}

pages/map/map.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="map">
-		<MyNav title="IHG地图" bgColor="" :backIcon="false"></MyNav>
+		<MyNav title="IHG西区地图" bgColor="" :backIcon="false"></MyNav>
 		<!-- 查询 -->
 		<view class="search" v-if="true">
 			<view class="search-top" style="padding: 16rpx 30rpx 0rpx;margin-bottom: 20rpx;">
@@ -77,7 +77,7 @@
 							<image v-else style=" width: 20rpx; height: 12rpx; " src="/static/icon/down02.png"
 								mode=""></image>
 						</view>
-						<view class="partner-main" v-if="search.partner==item.id">
+						<view class="partner-main" v-if="index >= 2 && search.partner==item.id">
 							<uni-data-checkbox multiple 
 								:value="search.selected"
 								@input="syncSelected"
@@ -105,7 +105,7 @@
 			<view style="height:1232rpx;">
 				<hch-position ref="map" :markers="hotelList" @moveToMarkId="moveToMarkId"/>
 			</view>
-			<view class="address-nav" style="overflow-x: visible; height:318rpx;">
+			<view class="address-nav" style="overflow-x: visible; height:159px;">
 				<!-- 遮挡地图修正 
 				<view class="address-nav-btn">
 					<view class="" @click="goLocation">
@@ -120,8 +120,9 @@
 					style="width: 100%; overflow-x: scroll; display: none;align-items: center;justify-content: space-between;">	
 				</view>
 				<!-- @scroll="bottomScroll" -->
-				<scroll-view style="width: calc(100% + 16px);height:318rpx;white-space: nowrap;margin-left: -8px;z-index:10" 
-					@scrolltolower="scrollTolower" 
+				<scroll-view style="width: calc(100% + 16px);height:159px;white-space: nowrap;margin-left: -8px;z-index:10" 
+					@scrolltolower="scrollTolower(hotelList.length-1)" 
+					@scrolltoupper="scrollTolower(0)"
 					@scroll="bottomScroll"
 					:scroll-x="true" 
 					:scroll-left="scrolls.scrollX" 
@@ -130,9 +131,8 @@
 				>
 					<view style="width: 8px;display: inline-block;"></view>
 					<view class="address-detail" v-for="(item,index) in hotelList" :key="index">
-						<view class="mark">
-							<image style=""
-								:src="item.bg_img" mode="aspectFill"></image>
+						<view class="mark" style="overflow: hidden;">
+							<image :src="item.bg_img" mode="aspectFill"></image>
 						</view>
 						<view class="inner">
 							<view class="address-detail-main">
@@ -152,7 +152,7 @@
 									<text>预订</text>
 								</view>
 							</view>
-							<view class="address-detail-position">
+							<view class="address-detail-position" v-if="item.distanceToMe">
 								<image style="width: 18rpx;height: 22rpx;" src="/static/icon/address02.png" mode="">
 								</image>
 								<text style="margin-left:4rpx ;">{{item.distanceToMe}}km</text>
@@ -196,7 +196,7 @@
 								<text>预订</text>
 							</view>
 						</view>
-						<view class="address-detail-position">
+						<view class="address-detail-position" v-if="item.distanceToMe">
 							<image style="width: 18rpx;height: 22rpx;" src="/static/icon/address02.png" mode=""></image>
 							<text style="margin-left:4rpx ;">{{item.distanceToMe}}km</text>
 						</view>
@@ -320,7 +320,6 @@
 					this.search.selected = Array.from(new Set([...this.search.selected, ...e]));
 				}		
 				this.search.checkedselected = e;
-				console.log(this.search.selected)
 			},
 			checked(id) {
 				if(this.search.selected.includes(id)){
@@ -422,11 +421,10 @@
 								},
 							}
 						}
-						this.hotelList.map(item=>{
-							item.distanceToMe=this.$utils.calcDistance(this.latitude,this.longitude,item.latitude,item.longitude).toFixed(1);
-							return item;
-						})
-						
+					})
+					tempHotelList.map(item=>{
+						item.distanceToMe=this.$utils.calcDistance(this.latitude,this.longitude,item.latitude,item.longitude).toFixed(1);
+						return item;
 					})
 					this.hotelList.push(...tempHotelList)
 					if(res.data.data.length >= 15){
@@ -482,7 +480,7 @@
 						}
 					})
 					if(res.data.data.length <= 0) return;
-					this.hotelList.map(item=>{
+					this.hotelList.map((item,index)=>{
 						item.distanceToMe=this.$utils.calcDistance(this.latitude,this.longitude,item.latitude,item.longitude).toFixed(1);
 						return item;
 					})	
@@ -494,11 +492,11 @@
 					}
 					setTimeout(()=>{
 						if(!this.beginConfig.hotel_id){
-							this.$refs.map.markertap({markerId: this.hotelList[0].id},true,this.search.isSearch)
+							this.$refs.map.markertap({markerId: this.hotelList[0].id,index:0},true,this.search.isSearch)
 							this.beginConfig.hotel_id = 0
 							this.search.isSearch = false
 						}else{	
-							this.localToMark(this.beginConfig.hotel_id);
+							this.localToMark(this.beginConfig.hotel_id,index);
 							// this.$refs.map.markertap({markerId: this.beginConfig.hotel_id})	
 							this.beginConfig.hotel_id = 0
 						}
@@ -546,45 +544,38 @@
 				this.isSelectSift = !this.isSelectSift
 			},
 			//下面酒店位移
-			moveToMarkId(markId){
-				this.hotelList.forEach((item,index) => {
-					if(markId == item.id){
-						this.scrollData.spa = true;
-						this.scrolls.scrollX = (256 * index) - (this.screenWidth-256)/2 + 'px';
-						setTimeout(()=>{
-							this.scrollData.spa = false
-						},500)
-						return;
-					} 
-				})
+			moveToMarkId(index){
+				this.scrollData.spa = true;
+				this.scrolls.scrollX = (256 * index) - (this.screenWidth-256)/2 + 'px';
+				setTimeout(()=>{
+					this.scrollData.spa = false
+				},500)
 			},
-			localToMark(markId){
+			localToMark(markId,index){
 				// this.moveToMarkId(markId)
-				this.$refs.map.markertap({markerId: markId}, true)
+				this.$refs.map.markertap({markerId: markId,index:index}, true)
 			},
 			bottomScroll(e){
 				if(this.scrollData.spa) return;
 				const moveX  = e.detail.scrollLeft;
 				this.scrollData.activeIndex = Math.floor((moveX + this.screenWidth) / 256) - 1;
 				if(this.$refs.map.isActiveMarker == this.hotelList[this.scrollData.activeIndex].id) return;
-				this.$refs.map.markertap({markerId: this.hotelList[this.scrollData.activeIndex].id}, false)
+				this.$refs.map.markertap({markerId: this.hotelList[this.scrollData.activeIndex].id,index: this.scrollData.activeIndex}, false)
 				this.scrollData.spa = true;
 				setTimeout(()=>{
 					this.scrollData.spa = false;
-				}, 10)
+				}, 300)
 			}, 
 			moveToTabX(e){
-				console.log(this.scrolls.scrollX)
 				this.scrollData.spa = true;
 				this.scrolls.scrollX = (256 * this.scrollData.activeIndex+1) - (this.screenWidth-256)/2 + 'px';
 				
-				console.log(this.scrolls.scrollX)
 				setTimeout(()=>{
 					this.scrollData.spa = false;
 				}, 500)
 			},
-			scrollTolower(){
-				this.$refs.map.markertap({markerId: this.hotelList[this.hotelList.length-1].id}, false)
+			scrollTolower(index){
+				this.$refs.map.markertap({index:index}, false)
 				this.scrollData.spa = true;
 				setTimeout(()=>{
 					this.scrollData.spa = false;
@@ -593,17 +584,14 @@
 			//获取当前页面路径
 			getPageUrl() {
 				const pages = getCurrentPages();
-				console.log(pages,'--------->pages')
 				if(pages.length==1){
 					const currentPage = pages[0];
 					let pageUrl = `/${currentPage.route}`;
 					return pageUrl
-					console.log('当前页面url：', pageUrl);
 				}else{
 					const currentPage = pages[pages.length - 1];
 					let pageUrl = `/${currentPage.route}`;
 					return pageUrl
-					console.log('当前页面url：', pageUrl);
 				}
 			},
 			// 跳转其他小程序
@@ -624,7 +612,6 @@
 						} else {
 							user_id = 0
 						}
-						console.log('成功', page)
 						_this.$api.my.userMemberAdd({
 							user_id,
 							page,

setting.js

@@ -6,7 +6,7 @@ const IS_DEV = process.env.NODE_ENV === 'development'
 // const URL = 'https://t9.9026.com'
 const URL = 'https://ihg.9026.com'
 
-
+	
 module.exports = {
   // 版本
   VERSION: '0.0.1',