You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
328 lines
9.9 KiB
328 lines
9.9 KiB
/*
|
|
* @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;
|
|
},
|
|
})
|
|
|