/* * @Author: mk 2403457699@qq.com * @Date: 2024-08-19 14:08:31 * @LastEditors: mk 2403457699@qq.com * @LastEditTime: 2024-10-21 11:08:03 * @FilePath: \epmet-voluntary-mp\pages\livingCircle\livingCircle.js * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE */ // import {sphereLifeSearchList} from "../../api/livingCircle" const app = getApp() Page({ data: { longitude:'', //经度 latitude: '', //维度 scale: 13, //地图默认缩放等级 markers: [], //点位数据 showModal: true, //弹框显隐 modalData: {}, //详情信息 circles:[{ latitude: '', longitude: '', color: "#09b8b6", fillColor: '#09b8b626', radius: 1800, strokeWidth: 2, }], active:0, pageNo:1, tabList:[{name:'全部',value:0},{name:'教育培训',value:1},{name:'医疗卫生',value:2},{name:'商业服务',value:3},{name:'文化体育',value:4},{name:'金融电邮',value:5},{name:'其他',value:6},], list:[], showModalDetail:false, detailList:[], tableList:[], community:{} }, onLoad: function (options) { }, onHide(){ if(wx.getStorageSync('livingCircleType')){ wx.removeStorage({ key: 'livingCircleType', }) } }, async onShow() { this.mapCtx = wx.createMapContext('map'); let than = this; try { const location = await new Promise((resolve, reject) => { wx.getLocation({ type: 'gcj02', success(res) { resolve(res); }, fail(err) { reject(err); } }); }); than.setData({ longitude: location.longitude, latitude: location.latitude, 'circles[0].longitude': location.longitude, 'circles[0].latitude': location.latitude, }); // 重置列表 than.restList(); // await than.sphereLifeSearchList(); if( wx.getStorageSync('livingCircleType')){ this.setData({ active: wx.getStorageSync('livingCircleType') }) } if(than.data.active == '1'){ this.loadMarkers([{ type: 'community', longitude: this.data.community.longitude,//'120.372537' latitude: this.data.community.latitude,//'36.098056' width: 28, height: 38, zindex:10, }]) }else if(than.data.active != '1'){ this.filterList(than.data.active) } } catch (err) { console.error('获取位置失败', err); } }, handelSearch(e){ this.sphereLifeSearchList(e.detail) if(this.data.active == '3'){ this.filterList('3') }else if(this.data.active == '2'){ this.filterList('2') }else if(this.data.active == '0'){ this.filterList('0') }else if(this.data.active != '1'){ this.filterList(this.data.active) } this.loadMarkers(this.data.list) }, async sphereLifeSearchList(searchKey) { try { let parm = { lon: this.data.longitude,//'120.372537' lat: this.data.latitude,//'36.098056' name: searchKey || '' }; const res = await sphereLifeSearchList(parm); // 使用 await 等待异步请求完成 if (res.code === 0 && res.data) { // 处理返回的数据 res.data = res.data.map(item => { if (item.latitude) { item.distance = this.getDistance(this.data.latitude, this.data.longitude, item.latitude, item.longitude).toFixed(2); } return item; // 返回修改后的 item }); this.setData({ tableList: res.data }); this.loadMarkers(res.data); } else { this.restList(); this.loadMarkers([]); } } catch (err) { console.log(err); this.restList(); this.loadMarkers([]); } }, loadMarkers(markers){ let markersData = markers.map((marker,index) => { console.log(marker.type,); return { id:index, longitude: marker.longitude, latitude: marker.latitude, title: marker.name, iconPath: marker.type === 'user'?'../../images/map/map-poi.png': marker.type === 'relaxation'?'../../images/map/relaxation.png':marker.type === '阵地'?'../../images/map/position.png':marker.type==='志愿组织'?'../../images/map/organization.png': marker.type === 'community'?'../../images/map/community.png':'../../images/map/relaxation.png', width: 28, height: 28, zindex:12, data:marker }; }); markersData.push({ type: 'user', longitude: this.data.longitude,//'120.372537' latitude: this.data.latitude,//'36.098056' width: 28, height: 38, zindex:10, }); console.log(markersData,'渲染前点位'); console.log(this.data.active); this.setData({ markers: markersData, // showModal:this.data.active !== 1?true:false,//默认打开列表,禅道-1801 }); }, onClickTab(e){ this.setData({ markers:[], active:e.currentTarget.dataset.value }) this.restList() if(e.currentTarget.dataset.value == '1'){ this.loadMarkers([{ type: 'community', longitude: this.data.community.longitude,//'120.372537' latitude: this.data.community.latitude,//'36.098056' width: 28, height: 38, zindex:10, }]) }else if(e.currentTarget.dataset.value != '1'){ this.filterList(e.currentTarget.dataset.value) } }, markertap(e) { let markerData = this.data.markers.find(marker => marker.id === e.detail.markerId); if(this.data.active !== 1){ this.setData({ showModalDetail: true, detailList:[markerData.data] }); }else{ let key = 'T5YBZ-OHPW4-77SUI-KZVFO-LYQL5-4OBTA'; let referer = '北邻家'; let endPoint = JSON.stringify({ //终点 'name': app.globalData.userInfo.agencyName + '服务点', 'latitude':this.data.community.latitude, 'longitude':this.data.community.longitude }); wx.navigateTo({ url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint }); } }, onClikTab(){ this.restList() if(this.data.active =='3'){ this.filterList('3') }else if(this.data.active =='2'){ this.filterList('2') }else if(this.data.active =='0'){ this.filterList('0') }else if(this.data.active !='1'){ this.filterList(this.data.active) } this.setData({ showModal: !this.data.showModal, }); }, filterList(type){ if(type == '0'){ this.setData({ list:this.data.tableList.filter(item=>item.type !== '场所') }) }else if (type == '2'){ this.setData({ list:this.data.tableList.filter(item=>item.type === '志愿组织') }) }else if (type == '3'){ this.setData({ list:this.data.tableList.filter(item=>item.type === '阵地') }) }else if (type != '1'){ if(type == '4'){ this.setData({ list:this.data.tableList.filter(item=>item.type === '教育培训') }) }else if(type == '5'){ this.setData({ list:this.data.tableList.filter(item=>item.type === '医疗卫生') }) }else if(type == '6'){ this.setData({ list:this.data.tableList.filter(item=>item.type === '商业服务') }) }else if(type == '7'){ this.setData({ list:this.data.tableList.filter(item=>item.type === '文化体育') }) }else if(type == '8'){ this.setData({ list:this.data.tableList.filter(item=>item.type === '金融电邮') }) }else if(type == '9'){ this.setData({ list:this.data.tableList.filter(item=>item.type === '其他') }) } } this.loadMarkers(this.data.list) }, onClose() { this.setData({ showModal: false, showModalDetail:false }); }, restList(){ this.setData({ list:[], pageNo:1, markers:[], }) }, toMyCommunity(){ wx.navigateTo({ url: '/pages/myCommunity/myCommunity', }) }, routePlanning(e){ let key = 'T5YBZ-OHPW4-77SUI-KZVFO-LYQL5-4OBTA'; let referer = ''; let endPoint = JSON.stringify({ //终点 'name': e.currentTarget.dataset.item.name, 'latitude': e.currentTarget.dataset.item.latitude, 'longitude': e.currentTarget.dataset.item.longitude }); wx.navigateTo({ url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint }); }, toDetail(e){ let obj = e.currentTarget.dataset.obj if(e.currentTarget.dataset.type ==="阵地"){ wx.navigateTo({ url: `/subpages/placeDetails/pages/index/index?id=${e.currentTarget.dataset.id}`, }) }else if(e.currentTarget.dataset.type ==="志愿组织"){ wx.navigateTo({ url: `/subpages/Myorganization/pages/organizationdetails/organizationdetails?id=${e.currentTarget.dataset.id}&type=map`, }) }else { wx.navigateTo({ url: `/subpages/merchantDetails/pages/index/index?obj=${encodeURIComponent(JSON.stringify(obj))}`, }) } }, // 根据两个经纬度获取当前距离 getDistance(lat1, lon1, lat2, lon2) { const R = 6371; const dLat = (lat2 - lat1) * Math.PI / 180; const dLon = (lon2 - lon1) * Math.PI / 180; const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * Math.sin(dLon / 2) * Math.sin(dLon / 2); const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); const distance = R * c; // 距离,单位为千米 return distance; }, })