From b055905bc432041d7e0116db1f962c8786b945cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=82=93=E6=B4=81?= <209192278@qq.com> Date: Sat, 18 Nov 2023 14:42:53 +0800 Subject: [PATCH] =?UTF-8?q?=E9=82=93=E6=B4=81=20:=20=E5=9C=B0=E5=9B=BE?= =?UTF-8?q?=E6=8E=A5=E5=8F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/index/map/map.vue | 132 ++++++++++++++++++++++++++++------------ 1 file changed, 94 insertions(+), 38 deletions(-) diff --git a/pages/index/map/map.vue b/pages/index/map/map.vue index d77f9d3..b2f59ce 100644 --- a/pages/index/map/map.vue +++ b/pages/index/map/map.vue @@ -8,12 +8,12 @@ --> - + - + @@ -22,6 +22,7 @@ data() { return { radius: '', + showShop: false, scaleM: [{ scale: 3, milo: 1000000 @@ -82,29 +83,40 @@ } ], scale: '', - lat: '30.48772', //纬度 - lng: '104.080145', //经度 - marker: [{ //用户当前位置 - id: 1, - latitude: 30.48772, - longitude: 104.080145, - iconPath: '../../../static/map/sp_icon_dw.png', - width: '58rpx', - height: '72rpx', - rotate: 0, - 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 - } + lat: uni.getStorageSync('latitude'), //纬度 + lng: uni.getStorageSync('longitude'), //经度 + marker: [ + // { //用户当前位置 + // id: 1, + // latitude: uni.getStorageSync('latitude'), + // longitude: uni.getStorageSync('longitude'), + // // iconPath: '../../../static/map/sp_icon_hdw.png', + // width: '58rpx', + // height: '72rpx', + // rotate: 0, + // alpha: 1 + // }, + // { //用户当前位置 + // id: 2, + // latitude: 30.48772, + // longitude: 104.080145, + // iconPath: '../../../static/map/sp_icon_dw.png', + // width: '58rpx', + // height: '72rpx', + // rotate: 0, + // 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,9 +161,9 @@ }, watch: { scale(newVal, oldVal) { - console.log('thisscale',newVal, Math.round(newVal)); - let ra='' - this.scaleM.forEach(item => { + console.log('thisscale', newVal, Math.round(newVal)); + 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' } }) },