diff --git a/pages/shopmap/index.vue b/pages/shopmap/index.vue index 445af9a..686a043 100644 --- a/pages/shopmap/index.vue +++ b/pages/shopmap/index.vue @@ -4,7 +4,7 @@ - + @@ -149,9 +149,16 @@ } }, onLoad() { - this.getCategory(); this.windowHeight = getApp().globalData.windowHeight; - this.getShopDistance(); + this.getShopDistance().then(() => { + this.getCategory(); + }).catch(() => { + uni.showModal({ + title: '', + content: '获取位置失败!', + showCancel: false + }) + }) // 腾讯地图KEY: GB3BZ-7W2CU-LW3VH-B7ZIF-XRKSF-D3FOL }, filters: { @@ -170,6 +177,16 @@ } }, methods: { + // 点击标记时触发 + markertap(e){ + let id = e.detail.markerId; + this.$url('/pages/goodsDetail/index?goods_id='+ id); + }, + // 点击marker对应的气泡时触发 + callouttap(e){ + let id = e.detail.markerId; + this.$url('/pages/goodsDetail/index?goods_id='+ id); + }, // 打开地图 openMap(address, lat, lng) { // let { address, lat, lng } = this.goods_detail?.store || {}; @@ -183,22 +200,30 @@ //获取当前位置 计算商店距离 getShopDistance() { let that = this; - uni.getLocation({ - type: 'gcj02', - isHighAccuracy: true, - success (res) { - that.self_latitude = res.latitude; - that.self_longitude = res.longitude; - that.getAddressInfo(); - }, - fail(err) { - console.log(err) - } + return new Promise((resolve, reject) => { + uni.showLoading({ + title: '正在获取您的位置' + }) + uni.getLocation({ + type: 'gcj02', + isHighAccuracy: true, + success (res) { + uni.hideLoading(); + that.self_latitude = res.latitude; + that.self_longitude = res.longitude; + that.getAddressInfo(); + resolve(); + }, + fail(err) { + console.log(err) + uni.hideLoading(); + reject(); + } + }) }) }, // 根据坐标获取地址信息 getAddressInfo(){ - // TODO 配置合法域名 qqmapsdk.reverseGeocoder({ location: { latitude: this.self_latitude, @@ -327,24 +352,60 @@ }else{ tab_item.list.push(...res.data.data); } - + console.log("res", res); let res_list = res.data.data || []; - let markers_self = res_list.map(item => { - return { - id: item.id, - name: item.title, - address: item.address, - latitude: item.latitude, - longitude: item.logitude, - width: 30, - height: 30 - } - }); - this.markers_list = markers_self + this.createMarkers(res_list); }).catch(err => { }) }, + // 将iconPath下载到本地,然后生成markers渲染出来 + createMarkers(res_list){ + let markers_self = []; + let p_list = []; // 异步队列 + uni.showLoading({ + title: '加载地图信息中' + }) + res_list.map(item => { + let itemP = new Promise((resolve, reject) => { + uni.downloadFile({ + url: item.picture, + complete: result => { + let tempFilePath = ""; + if (result.statusCode === 200) { + tempFilePath = result.tempFilePath; + } + let obj = { + id: item.id, + name: item.title, + address: item.address, + latitude: Number(item.latitude), + longitude: Number(item.longitude), + iconPath: tempFilePath, + width: 30, + height: 30, + callout: { + content: item.title, + fontSize: 14, + textAlign: 'center', + bgColor: "#fff", + borderRadius: 14, + padding: 4, + display: "ALWAYS" + } + } + markers_self.push(obj); + resolve(); + } + }) + }); + p_list.push(itemP); + }); + Promise.all(p_list).then(res => { + this.markers_list = markers_self; + uni.hideLoading(); + }) + } } }