elink-star
/
epmet-wx-pa-chengyang
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

干掉报错setCenter看看会不会解决首次地图不加载问题

dongming-master
mk 8 months ago
parent
7029a57ab9
commit
075c19c18b
1 changed files with 130 additions and 133 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 263
      src/views/livingCircle/index.vue

263
src/views/livingCircle/index.vue
View File

@ -6,68 +6,63 @@
<van-button round type="info" class="custom-button font-size13 m-top10 m-right12"
@click="handleSearch">查询</van-button>
</div>
<van-tabs @change="onTabChange" >
<van-tab v-for="item in tagList" :key="item.value" :title="item.name" @click="() => tabClick(item)">
<van-tabs @change="onTabChange">
<van-tab v-for="item in tagList" :key="item.value" :title="item.name" @click="() => tabClick(item)">
</van-tab>
</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')
: require('../../assets/images/livingCircle/address.png')">
<img style="width: 14px; height: 14px;" :src="showModal
? require('../../assets/images/livingCircle/list.png')
: require('../../assets/images/livingCircle/address.png')">
</div>
<div style="font-size: 15px; margin-left: 3px;">{{showModal?'查看地图':'查看列表'}}</div>
<div style="font-size: 15px; margin-left: 3px;">{{ showModal ? '查看地图' : '查看列表' }}</div>
</div>
</div>
<div>
<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 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">
{{ item.type }}
</div>
<div style="font-size: 15px;" class="">距我{{ item.distance }}km</div>
</div>
<div class="flex flex-y flex-center-j" @click="routePlanning(item)">
<img src="../../assets/images/livingCircle/navigation.png" class="navigation" />
<text class="color-gray font-size-20">导航</text>
</div>
</div>
<!-- 分隔符 -->
<div style="height: 120rpx;width: 100%;"></div>
</div>
<!-- <no-data v-if="list.length === 0"></no-data> -->
</van-popup>
<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 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">
{{ item.type }}
</div>
<div style="font-size: 15px;" class="">距我{{ item.distance }}km</div>
</div>
<div class="flex flex-y flex-center-j" @click="routePlanning(item)">
<img src="../../assets/images/livingCircle/navigation.png" class="navigation" />
<text class="color-gray font-size-20">导航</text>
</div>
</div>
<!-- 分隔符 -->
<div style="height: 120rpx;width: 100%;"></div>
</div>
</div>
<!-- <no-data v-if="list.length === 0"></no-data> -->
</van-popup>
</div>
<Android></Android>
</div>
</template>
<script>
import {Popup } from '@/plugins/vant'
import { Popup } from '@/plugins/vant'
import Map from '@/components/Map'
import { sphereLifeSearchList } from '@/api/lingCircle';
import { wgs84togcj02, gcj02tobd09 } from 'coordtransform';
@ -75,12 +70,12 @@ import { wgs84togcj02, gcj02tobd09 } from 'coordtransform';
export default {
data() {
return {
markers:[],
tableList:[],
overlay:true,
showModalDetail:false,
markers: [],
tableList: [],
overlay: true,
showModalDetail: false,
PublicityList: [],
tagList: [{name:'全部',value:0},{name:'我的社区',value:1},{name:'教育培训',value:4},{name:'医疗卫生',value:5},{name:'商业服务',value:6},{name:'文化体育',value:7},{name:'金融电邮',value:8},{name:'其他',value:9},],
tagList: [{ name: '全部', value: 0 }, { name: '我的社区', value: 1 }, { name: '教育培训', value: 4 }, { name: '医疗卫生', value: 5 }, { name: '商业服务', value: 6 }, { name: '文化体育', value: 7 }, { name: '金融电邮', value: 8 }, { name: '其他', value: 9 },],
tagActive: 'new',
tagId: null,
pageSize: 5,
@ -90,56 +85,55 @@ export default {
loading: true,
showRegister: false,
searchValue: "",
longitude:"",
latitude:"",
showModal:false
longitude: "",
latitude: "",
showModal: false
};
},
created() {
this.agencyId = this.$route.query.agencyId?this.$route.query.agencyId: this.$store.state.app.agencyId;
this.agencyId = this.$route.query.agencyId ? this.$route.query.agencyId : this.$store.state.app.agencyId;
// this.advertisingTag();//获取社区讯息菜单
},
async mounted(){
this.getUserLocation();
// await this.initMap();
mounted() {
this.getUserLocation();
},
methods: {
onTabChange(index) {
const selectedTab = this.tagList[index];
this.tableList=this.tableList.filter(item=>item.type===selectedTab.name)
this.tableList = this.tableList.filter(item => item.type === selectedTab.name)
this.loadMarkers(this.tableList)
},
//关闭
onClose() {
this.showModal=false,
this.showModalDetail=false
this.sphereLifeSearchList()
},
this.showModal = false,
this.showModalDetail = false
this.sphereLifeSearchList()
},
//查看生活圈列表
selectMap(){
this.showModal=true
this.showModalDetail=true
selectMap() {
this.showModal = true
this.showModalDetail = true
console.log(this.showModal);
},
async initMap() {
async initMap() {
const map = new qq.maps.Map(document.getElementById('content1'), {
center: new qq.maps.LatLng(this.latitude,this.longitude),
center: new qq.maps.LatLng(this.latitude, this.longitude),
zoom: 14, // 缩放级别
scrollwheel: true
});
console.log(this.longitude, this.latitude, "定位后的11");
const userMarker = new qq.maps.Marker({
position: new qq.maps.LatLng(this.latitude, this.longitude), // 用户位置
map:map
});
console.log(this.markers,"sdlkjglsdg");
position: new qq.maps.LatLng(this.latitude, this.longitude), // 用户位置
map: map
});
console.log(this.markers, "sdlkjglsdg");
this.markers.forEach(markerData => {
console.log(markerData,"sdflkhs");
console.log(markerData, "sdflkhs");
const marker = new qq.maps.Marker({
position: new qq.maps.LatLng(markerData.latitude, markerData.longitude),
map: map, // 地图实例
@ -155,14 +149,12 @@ export default {
// 可以在这里添加点击事件
qq.maps.event.addListener(marker, 'click', () => {
console.log("Marker clicked:", markerData.id);
this.showModal=true
this.tableList=this.tableList.filter((item) => item.id === markerData.id);
console.log(this.showModal,this.tableList,"dslkjsl");
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,"定位后的");
console.log(this.markers, this.latitude, this.longitude, "定位后的");
const circle = new qq.maps.Circle({
center: new qq.maps.LatLng(this.latitude, this.longitude),
radius: 1500,
@ -172,38 +164,31 @@ export default {
});
console.log(this.latitude, this.longitude, "sdf;ljjlsdfk");
circle.setMap(map)
map.setCenter(this.latitude, this.longitude); // 设置地图中心为用户位置
},
async getUserLocation() {
async getUserLocation() {
const geo = new qq.maps.Geolocation("5D6BZ-KHLW4-JUXU5-XIM47-5Q2DJ-IPBBT", "myapp");
console.log(geo,"dsflkjlksd");
console.log(geo, "dsflkjlksd");
geo.getLocation((position) => {
console.log(position,"sdfkljsdlfkjlksd");
console.log(position, "sdfkljsdlfkjlksd");
const lat = position.lat; // 纬度
const lng = position.lng; // 经度
this.longitude=position.lng
this.latitude=position.lat
// console.log( this.userMarker,"dsklgjldsk");
this.sphereLifeSearchList()//获取讯息列表
this.longitude = position.lng
this.latitude = position.lat
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){
this.$router.push({name:'livingCircleDetail',query:{id:item.id}})
toDetail(item) {
this.$router.push({ name: 'livingCircleDetail', query: { id: item.id } })
},
handleSearch(){
handleSearch() {
this.PublicityList = [];
this.pageNo = 1;
this.sphereLifeSearchList()
},
},
async sphereLifeSearchList(searchKey) {
let parm = {
lon: this.longitude,//'120.372537'
@ -222,23 +207,23 @@ export default {
}
})
console.log(this.tableList,'生活圈列表');
console.log(this.tableList, '生活圈列表');
}
this.loadMarkers(res.data);
await this.loadMarkers(res.data);
},
loadMarkers(markers) {
this.markers = [];
console.log(markers,"sdfkljofdl");
console.log(markers, "sdfkljofdl");
let markersData = markers.map((marker, index) => {
return {
id: marker.id,
longitude: marker.longitude,
latitude: marker.latitude,
title: marker.name,
iconPath: marker.type === 'user' ? 'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet-saas/dev/internal/20241111/3594d75211b04b21aaba60d7d9084db0.jpg'
: marker.type === 'relaxation' ? 'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet-saas/dev/internal/20241111/64cc030d80004e22a5f73f9838fe73a6.png' :
'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet-saas/dev/internal/20241111/64cc030d80004e22a5f73f9838fe73a6.png',
iconPath: marker.type === 'user' ? 'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet-saas/dev/internal/20241111/3594d75211b04b21aaba60d7d9084db0.jpg'
: marker.type === 'relaxation' ? 'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet-saas/dev/internal/20241111/64cc030d80004e22a5f73f9838fe73a6.png' :
'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet-saas/dev/internal/20241111/64cc030d80004e22a5f73f9838fe73a6.png',
width: 28,
height: 28,
zindex: 12,
@ -269,31 +254,34 @@ export default {
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
const distance = R * c; // 距离，单位为千米
return distance;
},
},
},
components: {Map},
components: { Map },
computed: {},
watch: {},
}
</script>
<style lang='less' scoped>
<style lang='less' scoped>
@import './index.less';
.text2{
.text2 {
font-family: PingFang SC;
font-weight: 500;
font-size: 12px;
color: #999999;
line-height: 48px;
font-weight: 500;
font-size: 12px;
color: #999999;
line-height: 48px;
}
.text1{
.text1 {
font-family: PingFang SC;
font-weight: 500;
font-size: 20px;
color: #000000;
line-height: 44px;
font-weight: 500;
font-size: 20px;
color: #000000;
line-height: 44px;
}
.custom-button {
width: 60px;
height: 33px;
@ -376,42 +364,51 @@ export default {
/* 取消边框 */
margin-right: 10px;
}
::v-deep .van-search__content {
background-color: white;
border: 1px solid #3974F6;
background-color: white;
border: 1px solid #3974F6;
}
::v-deep .van-search__input {
color: #000;
color: #000;
}
::v-deep .van-popup {
background-color: #F6F7F9;
}
::v-deep .van-field__control::placeholder {
color: #A0A0A0;
color: #A0A0A0;
}
: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; /* 确保有足够的高度 */
width: 100%;
height: 600px;
/* 确保有足够的高度 */
}
.InfoMap{
.InfoMap {
width: 92px;
height: 34px;
background: #FFFFFF;
box-shadow: 0px 1px 5px 0px rgba(185, 185, 185, 0.75);
border-radius: 17px 0px 0px 17px;
height: 34px;
background: #FFFFFF;
box-shadow: 0px 1px 5px 0px rgba(185, 185, 185, 0.75);
border-radius: 17px 0px 0px 17px;
}
</style>

Write Preview
Loading…
Cancel
Save