|
|
@ -12,7 +12,9 @@ |
|
|
|
</van-tabs> |
|
|
|
<div> |
|
|
|
<div id="content1"></div> |
|
|
|
<div class="InfoMap flex-center1 flex-center2" style="display: flex;flex-direction: row; background-color: rgb(255, 255, 255);position: fixed;right: 0;top: 30%;" @click="selectMap"> |
|
|
|
<div class="InfoMap flex-center1 flex-center2" |
|
|
|
style="display: flex;flex-direction: row; background-color: rgb(255, 255, 255);position: fixed;right: 0;top: 30%;" |
|
|
|
@click="selectMap"> |
|
|
|
<div> |
|
|
|
<img style="width: 14px; height: 14px;" :src="showModal |
|
|
|
? require('../../assets/images/livingCircle/list.png') |
|
|
@ -23,26 +25,19 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<van-popup |
|
|
|
round |
|
|
|
position="bottom" |
|
|
|
v-model="showModal" |
|
|
|
:style="{ height: '50%' }" |
|
|
|
@close="onClose" |
|
|
|
style="z-index: 10px;" |
|
|
|
:popup-background-color="'#F6F7F9'" |
|
|
|
|
|
|
|
> |
|
|
|
<van-popup round position="bottom" v-model="showModal" :style="{ height: '50%' }" @close="onClose" |
|
|
|
style="z-index: 10px;" :popup-background-color="'#F6F7F9'"> |
|
|
|
<div class="container"> |
|
|
|
|
|
|
|
<div v-for="(item, index) in tableList" :key="index" class="map_item flex flex-center-i" @click="toDetail(item)"> |
|
|
|
<img |
|
|
|
:src="item.attrs && item.attrs.length > 0 ? item.attrs[0].url : 'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/internal/20240927/087bb3a330a6494b9b09b5341c309ced.png'" |
|
|
|
class="left_image" |
|
|
|
/> |
|
|
|
<div v-for="(item, index) in tableList" :key="index" class="map_item flex flex-center-i" |
|
|
|
@click="toDetail(item)"> |
|
|
|
<img :src="item.attrs && item.attrs.length > 0 ? item.attrs[0].url : 'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/internal/20240927/087bb3a330a6494b9b09b5341c309ced.png'" |
|
|
|
class="left_image" /> |
|
|
|
<div class="flex flex-1 flex-y flex-sb"> |
|
|
|
<div style="font-size:18px ;" class="font-size-30 font-bold ellipsis">{{ item.name }}</div> |
|
|
|
<div style="font-size: 16px;" :class="item.type === 'relaxation' ? 'tag-g' : item.type === '志愿阵地' ? 'tag-b' : item.type === '志愿组织' ? 'tag-r' : 'tag-g'" class="tag font-size-20"> |
|
|
|
<div style="font-size: 16px;" |
|
|
|
:class="item.type === 'relaxation' ? 'tag-g' : item.type === '志愿阵地' ? 'tag-b' : item.type === '志愿组织' ? 'tag-r' : 'tag-g'" |
|
|
|
class="tag font-size-20"> |
|
|
|
{{ item.type }} |
|
|
|
</div> |
|
|
|
<div style="font-size: 15px;" class="">距我{{ item.distance }}km</div> |
|
|
@ -102,9 +97,8 @@ export default { |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
async mounted(){ |
|
|
|
mounted() { |
|
|
|
this.getUserLocation(); |
|
|
|
// await this.initMap(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
onTabChange(index) { |
|
|
@ -158,9 +152,7 @@ export default { |
|
|
|
this.showModal = true |
|
|
|
this.tableList = this.tableList.filter((item) => item.id === markerData.id); |
|
|
|
console.log(this.showModal, this.tableList, "dslkjsl"); |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
}); |
|
|
|
console.log(this.markers, this.latitude, this.longitude, "定位后的"); |
|
|
|
const circle = new qq.maps.Circle({ |
|
|
@ -172,7 +164,6 @@ export default { |
|
|
|
}); |
|
|
|
console.log(this.latitude, this.longitude, "sdf;ljjlsdfk"); |
|
|
|
circle.setMap(map) |
|
|
|
map.setCenter(this.latitude, this.longitude); // 设置地图中心为用户位置 |
|
|
|
}, |
|
|
|
async getUserLocation() { |
|
|
|
const geo = new qq.maps.Geolocation("5D6BZ-KHLW4-JUXU5-XIM47-5Q2DJ-IPBBT", "myapp"); |
|
|
@ -183,17 +174,11 @@ export default { |
|
|
|
const lng = position.lng; // 经度 |
|
|
|
this.longitude = position.lng |
|
|
|
this.latitude = position.lat |
|
|
|
// console.log( this.userMarker,"dsklgjldsk"); |
|
|
|
this.sphereLifeSearchList()//获取讯息列表 |
|
|
|
// map.setCenter(new qq.maps.LatLng(lat, lng)); // 设置地图中心为用户位置 |
|
|
|
}, (error) => { |
|
|
|
console.error(error); // 处理错误 |
|
|
|
}); |
|
|
|
// this.longitude=map.center.lng |
|
|
|
// this.latitude=map.center.lat |
|
|
|
// console.log(this.longitude,this.latitude,"定位后的"); |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
toDetail(item) { |
|
|
@ -225,7 +210,7 @@ export default { |
|
|
|
console.log(this.tableList, '生活圈列表'); |
|
|
|
|
|
|
|
} |
|
|
|
this.loadMarkers(res.data); |
|
|
|
await this.loadMarkers(res.data); |
|
|
|
}, |
|
|
|
loadMarkers(markers) { |
|
|
|
this.markers = []; |
|
|
@ -280,6 +265,7 @@ export default { |
|
|
|
|
|
|
|
<style lang='less' scoped> |
|
|
|
@import './index.less'; |
|
|
|
|
|
|
|
.text2 { |
|
|
|
font-family: PingFang SC; |
|
|
|
font-weight: 500; |
|
|
@ -287,6 +273,7 @@ export default { |
|
|
|
color: #999999; |
|
|
|
line-height: 48px; |
|
|
|
} |
|
|
|
|
|
|
|
.text1 { |
|
|
|
font-family: PingFang SC; |
|
|
|
font-weight: 500; |
|
|
@ -294,6 +281,7 @@ export default { |
|
|
|
color: #000000; |
|
|
|
line-height: 44px; |
|
|
|
} |
|
|
|
|
|
|
|
.custom-button { |
|
|
|
width: 60px; |
|
|
|
height: 33px; |
|
|
@ -376,6 +364,7 @@ export default { |
|
|
|
/* 取消边框 */ |
|
|
|
margin-right: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .van-search__content { |
|
|
|
background-color: white; |
|
|
|
border: 1px solid #3974F6; |
|
|
@ -384,6 +373,7 @@ export default { |
|
|
|
::v-deep .van-search__input { |
|
|
|
color: #000; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .van-popup { |
|
|
|
background-color: #F6F7F9; |
|
|
|
} |
|
|
@ -395,18 +385,25 @@ export default { |
|
|
|
:deep(.van-field__control) { |
|
|
|
font-size: 13px; |
|
|
|
} |
|
|
|
|
|
|
|
.van-tab__title { |
|
|
|
padding: 5px 12px; /* 内边距调整 */ |
|
|
|
font-size: 14px; /* 字体大小 */ |
|
|
|
padding: 5px 12px; |
|
|
|
/* 内边距调整 */ |
|
|
|
font-size: 14px; |
|
|
|
/* 字体大小 */ |
|
|
|
} |
|
|
|
|
|
|
|
.van-tabs__nav { |
|
|
|
justify-content: space-between; /* 平均分布 */ |
|
|
|
justify-content: space-between; |
|
|
|
/* 平均分布 */ |
|
|
|
} |
|
|
|
|
|
|
|
#content1 { |
|
|
|
width: 100%; |
|
|
|
height: 600px; /* 确保有足够的高度 */ |
|
|
|
height: 600px; |
|
|
|
/* 确保有足够的高度 */ |
|
|
|
} |
|
|
|
|
|
|
|
.InfoMap { |
|
|
|
width: 92px; |
|
|
|
height: 34px; |
|
|
|