|
|
|
@ -4,7 +4,7 @@ |
|
|
|
{ title: '看房', path: '/Showings' }, |
|
|
|
{ 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="title "> |
|
|
|
@ -118,6 +118,7 @@ const imgList = ref([ |
|
|
|
'https://example.com/img2.jpg', |
|
|
|
'https://example.com/img3.jpg', |
|
|
|
]) |
|
|
|
import centerImg from '@/assets/images/maker.png' |
|
|
|
const HouseApartmentList = ref([]) |
|
|
|
const houseId = route.query.id; |
|
|
|
const houseDetail = ref({}); // 存储房屋详情数据 |
|
|
|
@ -214,12 +215,35 @@ const initMap = async () => { |
|
|
|
zoom: 13, |
|
|
|
center: [residentialDetail.value.longtitude, residentialDetail.value.latitude], |
|
|
|
}); |
|
|
|
const marker = new AMap.Marker({ |
|
|
|
// 创建自定义标记，包含图标和文字 |
|
|
|
const customMarker = new AMap.Marker({ |
|
|
|
position: [residentialDetail.value.longtitude, residentialDetail.value.latitude], |
|
|
|
title: '公寓位置', // 鼠标悬停文字 |
|
|
|
icon: '../../assets/images/maker.png' // 自定义图标 |
|
|
|
title: '公寓位置', |
|
|
|
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) { |
|
|
|
|
