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

Write Preview
Loading…
Cancel
Save