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. 141
      src/views/livingCircle/index.vue

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

@ -6,43 +6,38 @@
<van-button round type="info" class="custom-button font-size13 m-top10 m-right12"
@click="handleSearch">查询</van-button>
</div>
<van-tabs @change="onTabChange" >
<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')">
</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'"
>
<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>
@ -67,7 +62,7 @@
</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(){
mounted() {
this.getUserLocation();
// await this.initMap();
},
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.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() {
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
map: map
});
console.log(this.markers,"sdlkjglsdg");
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,34 +164,27 @@ 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");
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.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()
@ -222,14 +207,14 @@ 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,
@ -272,7 +257,7 @@ export default {
},
},
components: {Map},
components: { Map },
computed: {},
watch: {},
}
@ -280,20 +265,23 @@ export default {
<style lang='less' scoped>
@import './index.less';
.text2{
.text2 {
font-family: PingFang SC;
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;
}
.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,19 +385,26 @@ 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{
.InfoMap {
width: 92px;
height: 34px;
background: #FFFFFF;

Write Preview
Loading…
Cancel
Save