地图组件重写

components/hch-position/hch-position.vue

@@ -9,6 +9,7 @@
 					:layerStyle="mapStyle"  
 					@markertap='markertap'
 					@anchorpointtap='anchorpointtap'
+					@updated="$emit('rendered')"
 				>
 				</map>
 			</view>
@@ -111,7 +112,7 @@
 
 		onReady() {
 			this._mapContext = uni.createMapContext("map", this);
-
+			this.innerGeo = Object.assign(this.geo)
 			// 仅调用初始化，才会触发 on.("markerClusterCreate", (e) => {})
 			this._mapContext.initMarkerCluster({
 				enableDefaultStyle: false,
@@ -135,25 +136,40 @@
 			},
 			//	点击标记点时触发，e.detail = {markerId}
 			markertap(index, mode = true, isQt = false) {
+				
 				console.log(index)
 				this.updateMode = mode
 				if(typeof index == 'object'){
 					index = index.markerId
 				}
-				if(this.painter.wait != 0) return;
-				if(this.isActiveMarkerIndex === index) return;
+				if(!isQt){
+					if(this.painter.wait != 0) return;
+					if(this.isActiveMarkerIndex === index) return;
+				}
+				
 				if(this.markersIn[this.isActiveMarkerIndex]){
 					this.markersIn[this.isActiveMarkerIndex].width = '34rpx';
 					this.markersIn[this.isActiveMarkerIndex].height = '40rpx';
 					this.markersIn[this.isActiveMarkerIndex].iconPath = '../../static/icon/late02.png';					
 				}
+				
 				this.isActiveMarkerIndex = index;
 				this.innerGeo = {
 					latitude: this.markersIn[this.isActiveMarkerIndex].latitude,
 					longitude: this.markersIn[this.isActiveMarkerIndex].longitude
 				}
 				this.painter.wait = 1;
-				this.painter.base.views[1].src = this.markersIn[this.isActiveMarkerIndex].activeIconPath				
+				this.$set(this.painter.base.views, 1, {
+					type: 'image',
+					src: this.markersIn[this.isActiveMarkerIndex].activeIconPath,
+					css: {
+						left: '3.5px',
+						top: '2px',
+						width: '35px',
+						height: '35px',
+						borderRadius: '17.5px'
+					}
+				})
 			},
 			canvasSuccess(e){
 				if(this.isActiveMarkerIndex == -1)return;
@@ -161,12 +177,8 @@
 				this.markersIn[this.isActiveMarkerIndex].height = '90rpx';
 				this.markersIn[this.isActiveMarkerIndex].iconPath = e;
 				this.markersIn = Object.assign(this.markersIn);
-				this.painter.wait=0
-				uni.vibrateShort({
-					success: function () {
-						console.log('success');
-					}
-				});
+				this.painter.wait=0;
+				uni.vibrateShort({});
 				this.updateMode&&this.$emit('moveToMarkId',this.isActiveMarkerIndex);
 			},
 			canvasFail(){
@@ -176,11 +188,7 @@
 				this.markersIn[this.isActiveMarkerIndex].iconPath = "";
 				this.markersIn = Object.assign(this.markersIn);
 				this.painter.wait=0
-				uni.vibrateShort({
-					success: function () {
-						console.log('fail');
-					}
-				});
+				uni.vibrateShort({});
 				this.updateMode&&this.$emit('moveToMarkId',this.isActiveMarkerIndex);
 			},
 			//点击定位标时触发，e.detail = {longitude, latitude}
@@ -196,22 +204,27 @@
 					}
 				})
 			},
-		},
-		watch:{
-			'markers': {
-				handler(val,oldVal) {
-					const temp = Object.assign(this.markers);
+			updateContent(hotelList,mode=false){
+				const temp = Object.assign(hotelList);
+				if(mode){
 					this.markersIn = temp.map((item, index)=>{
 						item.marker.id = index;
-					    return item.marker;
+						return item.marker;
 					})
-				},
-			},
+				}else{
+					const conpentate = this.markersIn.length;
+					this.markersIn.push(...temp.map((item, index)=>{
+						item.marker.id = index + conpentate;
+						return item.marker;
+					}))
+				}
+			}
+		},
+		watch:{
 			'geo':{
 				handler(v){
-					this.latitude = v.latitude
-					this.longitude = v.longitude
-				}
+					this.innerGeo = Object.assign(this.geo)
+				},
 			}
 		}
 	}

pages/map/map.vue

@@ -103,7 +103,7 @@
 		</view>
 		<view class="address">
 			<view style="height:1300rpx;">
-				<hch-position ref="map" :markers="hotelList" :geo="geo" @moveToMarkId="moveToMarkId"/>
+				<hch-position ref="map" :geo="geo" @moveToMarkId="moveToMarkId" @rendered="mapRendered"/>
 			</view>
 			<view class="address-nav" style="overflow-x: visible; height:318rpx;">
 				<!-- 遮挡地图修正 
@@ -121,7 +121,7 @@
 				</view>
 				<!-- @scroll="bottomScroll" -->
 				<view style="width: calc(100% + 32rpx);margin-left: -16rpx;z-index:10">
-					<scroll-hotel ref="scrollHotel" :hotelList="hotelList" @updateIndex="updateMapIndex"/>
+					<scroll-hotel ref="scrollHotel" :hotelList="hotelList" @updateIndex="updateMapIndex" @goBook="goBook"/>
 				</view>
 				
 				<view class="address-nav-button" @click="goLocation">
@@ -251,6 +251,7 @@
 					activeIndex:0
 				},
 				beginConfig:{
+					isBegin: true,
 					hotel_id: 0
 				}
 			}
@@ -265,18 +266,11 @@
 				this.search.currentSelected = category_ids.split(",")
 				this.search.selected = Object.assign(this.search.currentSelected)
 			}
+			console.log(hotel_id,category_ids)
 			//获取经纬度
 			this.getHotelCategory()
-			uni.getSystemInfo({
-				success:(res)=>{
-					this.screenWidth = res.screenWidth
-				}
-			})
 		},
 		methods: {
-			touchMove(e){
-				console.log(e)
-			},
 			syncSearchInput(e){
 				this.search.text = e
 			},
@@ -330,14 +324,13 @@
 				})
 			},
 			goLocation(){
-				let _this = this
 				uni.getLocation({
 					type: "gcj02", //返回可以用于wx.openLocation的经纬度
 					success: (res) => {
-						this.geo = Object.assign({
+						this.geo = {
 							latitude: res.latitude + Math.random()/100000,
 							longitude: res.longitude
-						})
+						}
 					},
 					fail: function(res) {
 						console.log(res)
@@ -346,13 +339,14 @@
 			},
 			//在地图渲染更新完成时触发的方法
 			updated() {
-				let _this = this
 				uni.getLocation({
 					type: "gcj02", //返回可以用于wx.openLocation的经纬度
-					success: function(res) {
-						_this.latitude = res.latitude
-						_this.longitude = res.longitude
-						_this.getList(true)
+					success: (res) => {
+						this.geo = {
+							latitude: res.latitude + Math.random()/100000,
+							longitude: res.longitude
+						}
+						this.getList(true)
 						//获取酒店列表
 					},
 					fail: function(res) {
@@ -368,30 +362,15 @@
 					const tempHotelList = res.data.data.map(item=>{
 						item.logo = this.$utils.toHttps(item.logo);
 						return {
-							...item, 
+							...item,
 							marker:{
 								id:item.id,
 								latitude: item.latitude,
 								longitude: item.longitude,
-								width:'34rpx',
-								height:'40rpx',
-								iconPath:'../../static/icon/late02.png' ,
-								active: {
-									width: '90rpx',
-									height: '100rpx',
-									iconPath: item.logo,
-								},
-								noActive:{
-									width:'34rpx',
-									height:'40rpx',
-									iconPath:'../../static/icon/late02.png' ,
-								},
-								callout1: {
-									content:item.name,
-									borderRadius: 10,
-									padding: 10,
-									display: "ALWAYS",
-								},
+								iconPath: '../../static/icon/late02.png',
+								activeIconPath: item.logo,
+								width: '34rpx',
+								height: '40rpx',
 							}
 						}
 					})
@@ -400,8 +379,21 @@
 						return item;
 					})
 					this.hotelList.push(...tempHotelList)
+					this.$refs.map.updateContent(tempHotelList, false);
 					if(res.data.data.length >= 15){
 						this.requestHotelPage(tempobj);
+					}else if(this.beginConfig.hotel_id&&this.beginConfig.isBegin){
+						let targetIndex = 0;
+						
+						for(const k in this.hotelList){
+							if(this.hotelList[k].id == this.beginConfig.hotel_id){
+								targetIndex = k;
+								break;
+							}
+						}
+						setTimeout(()=>{
+							this.$refs.map.markertap(targetIndex, true, true);
+						}, 1000)
 					}
 				})
 			},
@@ -412,9 +404,9 @@
 						tempobj[`category_ids[${index}]`] = item
 					})
 				}
-				if(this.latitude&&this.longitude){
-					tempobj['latitude'] = this.latitude;
-					tempobj['longitude'] = this.longitude;
+				if(this.geo.latitude&&this.geo.longitude){
+					tempobj['latitude'] = this.geo.latitude;
+					tempobj['longitude'] = this.geo.longitude;
 				}
 				if(this.search.text){
 					tempobj['name'] = this.search.text;
@@ -437,33 +429,37 @@
 							}
 						}
 					})
-					if(res.data.data.length <= 0) return;
 					this.hotelList.map((item,index)=>{
 						item.distanceToMe=this.$utils.calcDistance(this.latitude,this.longitude,item.latitude,item.longitude).toFixed(1);
 						return item;
-					})	
-					// this.hotelList.sort((prev,next)=>{
-					// 	return prev.distanceToMe-next.distanceToMe;
-					// })
-					if(islocal){
-						this.$refs.map.goLocation(this.latitude,this.longitude)
-					}
-					setTimeout(()=>{
-						if(!this.beginConfig.hotel_id){
-							this.$refs.map.markertap(0,true,this.search.isSearch)
-							this.beginConfig.hotel_id = 0
-							this.search.isSearch = false
-						}else{	
-							this.localToMark(this.beginConfig.hotel_id,index);
-							// this.$refs.map.markertap({markerId: this.beginConfig.hotel_id})	
-							this.beginConfig.hotel_id = 0
-						}
-					}, 300)
+					})
+					this.$refs.map.updateContent(this.hotelList, true);
 					if(res.data.data.length >= 15){
 						this.requestHotelPage(tempobj)
+					}else if(this.beginConfig.hotel_id&&this.beginConfig.isBegin){
+						let targetIndex = 0;
+						
+						for(const k in this.hotelList){
+							if(this.hotelList[k].id == this.beginConfig.hotel_id){
+								targetIndex = k;
+								break;
+							}
+						}
+						setTimeout(()=>{
+							this.$refs.map.markertap(targetIndex, true, true);
+						}, 500)
 					}
 				})
 			},
+			mapRendered(){
+				if((this.beginConfig.isBegin && !this.beginConfig.hotel_id)||this.search.isSearch){
+					this.beginConfig.isBegin = false
+					setTimeout(()=>{
+						this.$refs.map.markertap(0,true,this.search.isSearch)
+						this.search.isSearch = false
+					},500)
+				}
+			},
 			//去预定页面
 			goBook(index) {
 				if(!this.$store.getters.userInfo){
@@ -583,7 +579,7 @@
 					}
 				})
 			},
-		}
+		},
 	}
 </script>
 

pages/map/scrollHotel.vue

@@ -26,7 +26,7 @@
 							<text class="bottom-right">{{item.min_price}}起</text>
 						</view>
 					</view>
-					<view class="address-detail-main-right" @click="goBook(index)">
+					<view class="address-detail-main-right" @click="$emit('goBook',index)">
 						<text>预订</text>
 					</view>
 				</view>
@@ -52,13 +52,14 @@
 			},
 			speed: {
 				type: Number,
-				default: 2
+				default:4
 			}
 		},
 		data(){
 			return {
 				scrolls:{
-					screenWidth: 0,
+					compensate: 0,
+					screenWidth: 750,
 					scrollX: 0,
 					itemWidth: 512,
 					isAppend: false,
@@ -88,8 +89,8 @@
 			uni.getSystemInfo({
 				success: (res)=>{
 					const r = res.screenWidth / 750;
-					this.scrolls.screenWidth = res.screenWidth / r 
-					console.log(res.screenWidth, r, this.scrolls.screenWidth)
+					const rs = Math.ceil(r * 10)/10;
+					this.scrolls.compensate = Math.abs(Math.floor((r - rs) * 100)/2);
 				}
 			});
 		},
@@ -101,7 +102,7 @@
 				if(this.move.isMove) return;
 				const newX = e.touches[0].clientX
 				const baseSpeed = Math.abs(newX - this.move.oldX);
-				if(baseSpeed<2) return;
+				// if(baseSpeed<2) return;
 				
 				this.move.direct = newX > this.move.oldX ? 1 : -1;
 				this.move.oldX = newX;
@@ -118,7 +119,7 @@
 				this.move.isMove = true;
 				setTimeout(()=>{
 					this.move.isMove = false;
-				}, 30)
+				}, 50)
 			},
 			touchEnd(isUpdate){
 				if(this.scrolls.scrollX > 0){
@@ -133,7 +134,7 @@
 					}else if(this.activeIndex == -(this.hotelList.length - 1)){
 						this.scrolls.scrollX = this.maxRight  + (this.scrolls.screenWidth - this.scrolls.itemWidth -16)
 					}else{
-						this.scrolls.scrollX = this.activeIndex * this.scrolls.itemWidth + (this.scrolls.screenWidth - this.scrolls.itemWidth)/2
+						this.scrolls.scrollX = this.activeIndex * this.scrolls.itemWidth + (this.scrolls.screenWidth - this.scrolls.itemWidth)/2 - this.activeIndex*this.scrolls.compensate;
 					}
 				}
 				isUpdate && this.$emit('updateIndex', -this.activeIndex);
@@ -142,21 +143,17 @@
 				this.scrolls.scrollX = -index * this.scrolls.itemWidth;
 				this.touchEnd(false);
 			},
+			goBook(){
+				
+			}
 		},
-		watch:{
-			hotelList:{
-				handler(newValue){
-					this.scrolls.scrollX = 0;
-				}
-			},
-		}
 	}
 </script>
 
 <style scoped lang="scss">
 	.scroll-hotel{
 		height:318rpx;white-space: nowrap;
-		transition: transform 50ms linear;
+		transition: transform 100ms linear;
 		
 		.address-detail {
 			display: inline-block;