138 lines
2.9 KiB
Vue
138 lines
2.9 KiB
Vue
<template>
|
|
<view>
|
|
<view class="search-box">
|
|
<view class="search-box-input">
|
|
<u-input placeholder="热门店铺" placeholder-style="color: #888888" prefixIcon="search"
|
|
prefixIconStyle="font-size: 24px;color: #888888;" border="true">
|
|
</u-input>
|
|
</view>
|
|
</view>
|
|
<view class="content">
|
|
<map id="map" @markertap="markerClick" :markers="marker" :show-location="true" :latitude="lat"
|
|
:longitude="lng"></map>
|
|
</view>
|
|
<view class="down-shop">
|
|
<ShowShopListItem :shopInfo="shopList"></ShowShopListItem>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
lat: '30.48772',
|
|
lng: '104.080145',
|
|
marker: [{
|
|
id: 1,
|
|
latitude: 30.488573,
|
|
longitude: 104.081248,
|
|
iconPath: '../../../static/map/sp_icon_dw.png',
|
|
width: '58rpx',
|
|
height: '72rpx',
|
|
rotate: 0,
|
|
alpha: 1
|
|
},
|
|
{
|
|
id: 2,
|
|
latitude: 30.48772,
|
|
longitude: 104.080145,
|
|
// iconPath: '../../../static/map/sp_icon_dw.png',
|
|
width: '58rpx',
|
|
height: '72rpx',
|
|
rotate: 0,
|
|
alpha: 1
|
|
}
|
|
],
|
|
shopList: {
|
|
imageUrl: 'https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg',
|
|
title: '琴行铺面转让',
|
|
promotionNum: 23,
|
|
price: 5000,
|
|
date: '2023-11-02'
|
|
}
|
|
}
|
|
},
|
|
onShow() {
|
|
// 地图
|
|
this._mapContext = uni.createMapContext("map", this);
|
|
this._mapContext.initMarkerCluster({
|
|
enableDefaultStyle: false,
|
|
zoomOnClick: true,
|
|
gridSize: 60,
|
|
complete(res) {
|
|
console.log('initMarkerCluster', res)
|
|
}
|
|
});
|
|
this._mapContext.on("markerClusterCreate", (e) => {
|
|
console.log("markerClusterCreate", e);
|
|
});
|
|
},
|
|
methods: {
|
|
// 图标点击
|
|
markerClick(e) {
|
|
console.log('标记点击', e);
|
|
let markerId = e.markerId; //点击标记点, 获取id, 查询店铺详情, 展示在下方
|
|
this.marker.forEach(item => {
|
|
if (markerId === item.id) {
|
|
item.iconPath = ""
|
|
} else {
|
|
item.iconPath = "../../../static/map/sp_icon_dw.png"
|
|
}
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.search-box {
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 20rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
|
|
.search-box-input {
|
|
width: 580rpx;
|
|
height: 62rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 12rpx;
|
|
opacity: 0.85;
|
|
}
|
|
}
|
|
|
|
// 地图
|
|
.content {
|
|
width: 100%;
|
|
height: 460rpx;
|
|
|
|
#map {
|
|
width: 100%;
|
|
height: 100vh;
|
|
}
|
|
}
|
|
|
|
.down-shop {
|
|
width: 710rpx;
|
|
// background-color: red;
|
|
position: absolute;
|
|
z-index: 1;
|
|
bottom: 60rpx;
|
|
left: 10%;
|
|
transform: translateX(-10%);
|
|
|
|
.list-border {
|
|
margin: 0;
|
|
padding: 20rpx 20rpx 20rpx 27rpx;
|
|
width: 94.5%;
|
|
border-radius: 7rpx;
|
|
box-shadow: 0rpx 1rpx 2rpx 0rpx rgba(224, 224, 224, 0.5), 0rpx 4rpx 12rpx 1rpx rgba(102, 102, 102, 0.37);
|
|
|
|
.rent-and-date text {
|
|
margin-right: 30rpx !important;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
</style> |