elink-star
/
epmet-asd-pc
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

地图点位显示问题

master
mk 1 week ago
parent
9d5581df3e
commit
03c4c6d7f8
3 changed files with 46 additions and 19 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. 4
      epmet-apartment-front/index.html
  2. 34
      src/views/showings/apartmentDetail.vue
  3. 27
      src/views/showings/components/HouseList.vue

4
epmet-apartment-front/index.html
View File

@ -7,8 +7,8 @@
<link rel="apple-touch-icon" href="/favicon.svg"> <link rel="apple-touch-icon" href="/favicon.svg">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>青岛市免租金住房保障平台</title> <title>青岛市免租金住房保障平台</title>
<script type="module" crossorigin src="/epmet-apartment-front/static/index-30fuTdlf.js"></script> <script type="module" crossorigin src="/epmet-apartment-front/static/index-C6AMzBbb.js"></script>
<link rel="stylesheet" crossorigin href="/epmet-apartment-front/static/index-CM8JTdPf.css"> <link rel="stylesheet" crossorigin href="/epmet-apartment-front/static/index-DAF00gGn.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

34
src/views/showings/apartmentDetail.vue
View File

@ -4,7 +4,7 @@
{ title: '看房', path: '/Showings' }, { title: '看房', path: '/Showings' },
{ title: '公寓详情', path: '' }, { title: '公寓详情', path: '' },
]" ]"
:width="1510" :width="1678"
/> />
<div class="w-[1310px] mx-auto mt-10 bg-white pb-9 px-6 pt-6 rounded relative"> <div class="w-[1310px] mx-auto mt-10 bg-white pb-9 px-6 pt-6 rounded relative">
<div class="title "> <div class="title ">
@ -118,6 +118,7 @@ const imgList = ref([
'https://example.com/img2.jpg', 'https://example.com/img2.jpg',
'https://example.com/img3.jpg', 'https://example.com/img3.jpg',
]) ])
import centerImg from '@/assets/images/maker.png'
const HouseApartmentList = ref([]) const HouseApartmentList = ref([])
const houseId = route.query.id; const houseId = route.query.id;
const houseDetail = ref({}); // 存储房屋详情数据 const houseDetail = ref({}); // 存储房屋详情数据
@ -214,12 +215,35 @@ const initMap = async () => {
zoom: 13, zoom: 13,
center: [residentialDetail.value.longtitude, residentialDetail.value.latitude], center: [residentialDetail.value.longtitude, residentialDetail.value.latitude],
}); });
const marker = new AMap.Marker({ // 创建自定义标记，包含图标和文字
const customMarker = new AMap.Marker({
position: [residentialDetail.value.longtitude, residentialDetail.value.latitude], position: [residentialDetail.value.longtitude, residentialDetail.value.latitude],
title: '公寓位置', // 鼠标悬停文字 title: '公寓位置',
icon: '../../assets/images/maker.png' // 自定义图标 icon: centerImg,
// 使用自定义内容
content: `
<div style="position: relative;">
<img src="${centerImg}" style="width: 32px; height: 32px;" />
<div style="
position: absolute;
top: 40px;
left: -50px;
background-color: #ffffff;
border-radius: 8px;
padding: 6px 12px;
font-size: 14px;
color: #333333;
border: 1px solid #e0e0e0;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
white-space: nowrap;
z-index: 1000;
">
${residentialDetail.value.deptName || '公寓名称'}
</div>
</div>
`
}); });
map.add(marker); map.add(customMarker);
} catch (err) { } catch (err) {

27
src/views/showings/components/HouseList.vue
View File

@ -3,20 +3,23 @@
<div>选择乐业社区</div> <div>选择乐业社区</div>
<el-divider /> <el-divider />
<div class="flex flex-col"> <div class="flex flex-col">
<div class="flex gap-5" v-for="(item, index) in list" :key="index" @click="toHouseDetail(item)"> <div v-for="(item, index) in list" :key="index">
<img :src="item.coverImg" alt="" class="w-[140px] h-[100px]" /> <div class="flex gap-5" @click="toHouseDetail(item)">
<div class="flex-1 flex flex-col"> <img :src="item.coverImg" alt="" class="w-[140px] h-[100px]" />
<div class="font-bold">{{ item.apartmentName }}</div> <div class="flex-1 flex flex-col">
<div>共{{ item.total }}间</div> <div class="font-bold">{{ item.apartmentName }}</div>
<div class="text-gray-400">{{ item.address }}</div> <div>共{{ item.total }}间</div>
<div> <div class="text-gray-400">{{ item.address }}</div>
<div v-for="tag in item.labels" :key="tag" <div>
class="mr-1 mb-1 inline-flex items-center px-2 py-1 rounded text-xs font-medium" <div v-for="tag in item.labels" :key="tag"
:class="tag === '1' ? 'bule' : tag === '2' ? 'green' : 'yellow'"> class="mr-1 mb-1 inline-flex items-center px-2 py-1 rounded text-xs font-medium"
{{ getLabel(tag) }} :class="tag === '1' ? 'bule' : tag === '2' ? 'green' : 'yellow'">
{{ getLabel(tag) }}
</div>
</div>
</div> </div>
</div>
</div> </div>
<el-divider v-if="index < list.length - 1" />
</div> </div>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save