邓洁 : 地图接口

pages/index/map/map.vue

@@ -8,12 +8,12 @@
 			</view>
 		</view> -->
 		<view class="content">
-			<map id="map" @markertap="markerClick" @regionchange="handleRegionChange()" :markers="marker"
+			<map id="map" @markertap="markerClick" @regionchange="handleRegionChange()" :markers="marker" show-location="true"
-				:show-location="true" :latitude="lat" :longitude="lng" :show-scale="true"></map>
+				:latitude="lat" :longitude="lng" :show-scale="true"></map>
 		</view>
-		<!-- <view class="down-shop">
+		<view class="down-shop" v-if="showShop">
 			<ShowShopListItem :shopInfo="shopList" :is-adshow="true" :show-style="0"></ShowShopListItem>
-		</view> -->
+		</view>
 	</view>
 </template>
 
@@ -22,6 +22,7 @@
 		data() {
 			return {
 				radius: '',
+				showShop: false,
 				scaleM: [{
 						scale: 3,
 						milo: 1000000
@@ -82,29 +83,40 @@
 					}
 				],
 				scale: '',
-				lat: '30.48772', //纬度
+				lat: uni.getStorageSync('latitude'), //纬度
-				lng: '104.080145', //经度
+				lng: uni.getStorageSync('longitude'), //经度
-				marker: [{ //用户当前位置
+				marker: [
-						id: 1,
+					// { //用户当前位置
-						latitude: 30.48772,
+					// 	id: 1,
-						longitude: 104.080145,
+					// 	latitude: uni.getStorageSync('latitude'),
-						iconPath: '../../../static/map/sp_icon_dw.png',
+					// 	longitude: uni.getStorageSync('longitude'),
-						width: '58rpx',
+					// 	// iconPath: '../../../static/map/sp_icon_hdw.png',
-						height: '72rpx',
+					// 	width: '58rpx',
-						rotate: 0,
+					// 	height: '72rpx',
-						alpha: 1
+					// 	rotate: 0,
-					},
+					// 	alpha: 1
-					//周围标记点
+					// },
-					{
+					// { //用户当前位置
-						id: 2,
+					// 	id: 2,
-						latitude: 30.488573,
+					// 	latitude: 30.48772,
-						longitude: 104.081248,
+					// 	longitude: 104.080145,
-						// iconPath: '../../../static/map/sp_icon_dw.png',
+					// 	iconPath: '../../../static/map/sp_icon_dw.png',
-						width: '58rpx',
+					// 	width: '58rpx',
-						height: '72rpx',
+					// 	height: '72rpx',
-						rotate: 0,
+					// 	rotate: 0,
-						alpha: 1
+					// 	alpha: 1
-					}
+					// },
+					// //周围标记点
+					// {
+					// 	id: 2,
+					// 	latitude: 30.488573,
+					// 	longitude: 104.081248,
+					// 	// iconPath: '../../../static/map/sp_icon_dw.png',
+					// 	width: '58rpx',
+					// 	height: '72rpx',
+					// 	rotate: 0,
+					// 	alpha: 1
+					// }
 				],
 				shopList: {
 					shopid: 1,
@@ -149,8 +161,8 @@
 		},
 		watch: {
 			scale(newVal, oldVal) {
-				console.log('thisscale',newVal, Math.round(newVal));
+				console.log('thisscale', newVal, Math.round(newVal));
-				let ra=''
+				let ra = ''
 				this.scaleM.forEach(item => {
 					if (item.scale == Math.round(newVal)) {
 						ra = item.milo
@@ -168,35 +180,62 @@
 			}
 		},
 		created() {
-			this.getMapList()
+			// this.getMapList()
 		},
 		methods: {
+			getDetail(type, id) {
+				this.$api.getShopDetail(type, id).then(res => {
+					console.log('详情', res);
+					const data = res.data.data
+					if (res.data.code == 1) {
+						this.shopList = {
+							shopid: 1,
+							imageUrl: this.$api.imgUrl + data.pics,
+							title: data.tt,
+							promotionNum: data.num,
+							price: data.zujin,
+							date: '2023-11-02',
+							pos: data.area1,
+							exactPos: data.address,
+							sqr: data.mianji,
+							zrfText: "转让费：" + data.zhuanrangfei,
+							category: data.trade,
+							uname: data.lianxiren,
+							phoneNum: data.mobile,
+						}
+						// data.pics = [this.$api.imgUrl + data.pics]
+						// this.shopInfo = data
+					}
+				})
+			},
 			handleRegionChange(e) {
 				console.log('地图缩放层级变化, 只能监听拖拽, 不能监听缩放', e);
 			},
 			getMapList(radius) {
-				console.log('this.radius',radius);
+				console.log('longitude', uni.getStorageSync('longitude'));
+				console.log('latitude', uni.getStorageSync('latitude'));
 				const realData = {
 					longitude: uni.getStorageSync('longitude'),
 					latitude: uni.getStorageSync('latitude'),
-					radius: 100
+					radius: radius * 1000
 				}
+				console.log('realData.radius', realData.radius);
 				const mockData = {
 					longitude: 23.40,
 					latitude: 116.38,
 					radius: 1111111111
 				}
-				this.$api.getMap(mockData).then(res => {
+				this.$api.getMap(realData).then(res => {
 					console.log('getMap', res);
 					let obj = {}
 					let arr = []
-					if (res.statusCode === 200) {
+					if (res.data.code == 1) {
 						res.data.data.forEach(item => {
 							obj = {
 								id: parseInt(item.id),
 								latitude: item.lat,
 								longitude: item.lng,
-								// iconPath: '../../../static/map/sp_icon_dw.png',
+								iconPath: '../../../static/map/sp_icon_dw.png',
 								width: '58rpx',
 								height: '72rpx',
 								rotate: 0,
@@ -204,7 +243,18 @@
 							}
 							arr.push(obj)
 						})
-						// this.marker=arr
+						this.marker = [{ //用户当前位置
+								id: 1,
+								latitude: realData.latitude,
+								longitude: realData.longitude,
+								iconPath: '../../../static/map/sp_icon_hdw.png',
+								width: '58rpx',
+								height: '72rpx',
+								rotate: 0,
+								alpha: 1
+							},
+							...arr,
+						]
 						console.log('this.marker', this.marker);
 					}
 				})
@@ -212,12 +262,18 @@
 			// 图标点击
 			markerClick(e) {
 				console.log('标记点击', e);
+				this.showShop = true
 				let markerId = e.markerId; //点击标记点, 获取id, 查询店铺详情, 展示在下方
+				this.getDetail(1, markerId)
 				this.marker.forEach(item => {
 					if (markerId === item.id) {
-						item.iconPath = ""
+						item.iconPath = "../../../static/map/sp_icon_hdw.png"
+						item.width = '58rpx'
+						item.height = '72rpx'
 					} else {
 						item.iconPath = "../../../static/map/sp_icon_dw.png"
+						item.width = '58rpx'
+						item.height = '72rpx'
 					}
 				})
 			},