地图优化

pages/hotel/mapList.vue

@@ -16,13 +16,11 @@
 
 				:longitude="center.longitude"
             	:latitude="center.latitude"
-				:include-points="includePoints.points"
 			-->
 			<map id="myMap" ref="myMapRef" style="width: 100%; height: 100%;" 
             :longitude="center.longitude"
             :latitude="center.latitude"
             :markers="markers"
-			:scale="scale"
             @callouttap="handleCalloutClick"
             >
             </map>
@@ -156,13 +154,11 @@
 				prevCurrent: null,
 				current: 0,
 				nextCurrent: null,
-				padding: [20, 50, 20, 50],
+				padding: [20, 20, 20, 20],
 				MapType: 0,
-				includePoints: {
-					points: [],
-				},
+				includePoints: [],
 				scale: 13,
-				mapData: {},
+				mapCtx: null,
 			};
 		},
 		components: {
@@ -202,43 +198,30 @@
 			});
 			
 			
+		},
+		mounted() {
+			// #ifdef MP-WEIXIN
+			this.initMiniProgramMap();
+			// #endif
 		},
 		methods: {
-			calculateBounds(markers) {
-				if (markers.length === 0) return null;
-				
-				let minLat = markers[0].lat;
-				let maxLat = markers[0].lat;
-				let minLng = markers[0].lng;
-				let maxLng = markers[0].lng;
-
-				markers.forEach(marker => {
-					minLat = Math.min(minLat, marker.lat);
-					maxLat = Math.max(maxLat, marker.lat);
-					minLng = Math.min(minLng, marker.lng);
-					maxLng = Math.max(maxLng, marker.lng);
-				});
-
-				return {
-					southWest: this.mapData.LatLng(minLat, minLng),
-					northEast: this.mapData.LatLng(maxLat, maxLng)
-				};
+			initMiniProgramMap(){
+				let that = this
+				const query = wx.createSelectorQuery().in(this);
+				query.select('#myMap').fields({
+					node: true,
+					size: true
+				}, (res) => {
+					that.mapCtx = wx.createMapContext('myMap');
+					console.log(this.mapCtx,'--------地图实例')
+				}).exec();
 			},
-			adjustMapToFitMarkers(markers) {
-				const bounds = this.calculateBounds(markers);
-				if (!bounds) return;
-
-				// 创建 LatLngBounds 对象
-				const latLngBounds = this.mapData.LatLngBounds(
-					bounds.southWest,
-					bounds.northEast
-				);
-
-				// 调整地图视图
-				map.fitBounds(latLngBounds);
-
-				// 可选：添加动画效果
-				map.panToBounds(latLngBounds);
+			fitMapToBounds() {
+				if (!this.mapCtx || this.includePoints.length === 0) return;
+				this.mapCtx.includePoints({
+					points:this.includePoints,
+					padding: [20,40,20,40],
+				});
 			},
 			getItem(parameters,obj) {
 				this.searchObj = parameters
@@ -259,16 +242,15 @@
 						this.current = i
 					}
 				}
-				console.log(this.current,'----')
 				this.setNewMarkers()
             },
 			setNewMarkers(){
 				for (let i = 0; i < this.markers.length; i++) {
 					if(i==this.current){
-						this.center = {
-							longitude: this.markers[i].longitude,
-							latitude: this.markers[i].latitude,
-						}
+						// this.center = {
+						// 	longitude: this.markers[i].longitude,
+						// 	latitude: this.markers[i].latitude,
+						// }
 						this.markers[this.current] ={
 							...this.markers[i],
 							callout:{
@@ -289,14 +271,16 @@
 				this.$forceUpdate()
 			},
             getLocation() {
+				let that = this
                 wx.getLocation({
                     type: 'wgs84', // 精度模式
                     success: (res) => {
+						that.fitMapToBounds();
                         // 更新地图中心点
-                        if(this.$refs.map)this.$refs.map.moveToLocation({
-								longitude: res.longitude,
-								latitude: res.latitude
-						});
+                        // if(that.$refs.myMapRef)this.$refs.myMapRef.moveToLocation({
+						// 		longitude: res.longitude,
+						// 		latitude: res.latitude
+						// });
                     },
                     fail: (err) => {
                         console.error('定位失败', err);
@@ -342,17 +326,17 @@
 				this.getList();
 			},
 			//获取列表数据
-			getList(type) {
+			async getList(type) {
 				if(this.showLoading) return
 				this.showLoading = true
 				uni.showLoading({ title: "加载中" , mask: true});
 				this.searchObj.QStars = this.tempRateAndPrice.rate.toString();
-				if (type == 1) {
+				if (type == 1||this.searchObj.pageIndex==1) {
 					this.HotelList = [];
 					this.markers = []
-					this.includePoints.points = []
+					this.includePoints = []
 				}
-				this.apipost( "dmc_post_B2BAndB2CGetDidaHotelPage", this.searchObj,
+				await this.apipost( "dmc_post_B2BAndB2CGetDidaHotelPage", this.searchObj,
 					(res) => {
 						uni.hideLoading()
 						if (res.resultCode == 1) {
@@ -381,12 +365,12 @@
 					}
 				);
 			},
-			setMarkers(pageData){
+			async setMarkers(pageData){
 				if(pageData.length==0)return
 				for (let i = 0; i < pageData.length; i++) {
-					this.includePoints.points.push({
-						latitude: pageData[i].latitude,
-						longitude: pageData[i].longitude,
+					this.includePoints.push({
+						latitude: pageData[i].latitude+ i * 0.00001,
+						longitude: pageData[i].longitude+ i * 0.00001,
 					})
 					let obj = JSON.parse(JSON.stringify(this.markersObj))
 					obj = {
@@ -403,29 +387,21 @@
 					if(i==0&&this.searchObj.pageIndex===1){
 						obj.callout = {
 							...obj.callout,
-							...this.editCallout1
-						}
-						this.center = {
-							longitude: pageData[0].longitude,
-							latitude: pageData[0].latitude,
+							...this.editCallout1,
 						}
+						// this.center = {
+						// 	longitude: pageData[0].longitude,
+						// 	latitude: pageData[0].latitude,
+						// }
 					}
 					this.markers.push(obj)
 				}
-				
-				setTimeout(()=>{
-					let that = this
-					// const query = wx.createSelectorQuery().in(this);
-					// query.select('#myMap').fields({
-					// 	node: true,
-					// 	size: true
-					// 	}, (res) => {
-					// 	const mapContext = res.node.getMapContext();
-					// 	mapContext.moveToLocation();
-					// 	that.mapData = res.node.getMapContext()
-					// 	that.adjustMapToFitMarkers(that.markers)
-					// }).exec();
-				},300)
+				setTimeout(() => {
+					this.$nextTick(() => {
+						this.fitMapToBounds();
+					});
+				}, 500);
+
 				this.$forceUpdate()
 			}
 		},