阅读量:0
需求是根据后端返回数据在地图上显示标记点，并且根据数据状态控制标记点颜色，标记点背景通过两张图片实现控制
<map style="width: 100vw; height: 100vh;" :markers="markers" :longitude="locaInfo.longitude" :latitude="locaInfo.latitude" @markertap="markerClick" @callouttap='callouttap' > <!-- 使用callout进行自定义 --> <cover-view slot="callout"> <template v-for="(item,index) in markers"> <cover-view style="position: relative; width: 100%;padding-right: 20px;" :marker-id="item.id" :key='index'> <cover-view class="marker-box" style="padding: 5px 5px 12px 5px;"> <cover-image class="position-absolute" style="margin-right: 5px; width: 30rpx; height: 30rpx;" :src="item.options.img"></cover-image> <cover-view>{{item.options.labelName}}</cover-view> <cover-image class="position-absolute" style="position: absolute; left: 0;top: 0; z-index: -1; width: 100%; height: 100%;" :src="item.options.isStore?item.options.active_bg:item.options.bg"></cover-image> </cover-view> <cover-view style="position: absolute; right: 0px; top: 50%; transform: translateY(-65%); z-index: 2 ; width: 16px; height: 16px; border-radius: 50%; background-color: aquamarine;"></cover-view> </cover-view> </template> </cover-view> </map> <script> export default { data() { return { storeIndex:0, locaInfo: { longitude:120.445172, latitude:36.111387 }, markers: [ // 标点列表 { id: 1, //标记点id index: 0, clusterId: 1, //自定义点聚合簇效果时使用 latitude: 36.116874, // 纬度 longitude: 120.441515, // 经度 iconPath: '/static/tm.png', options: { isStore: true, img: '/static/store.png', bg: '/static/1.png', active_bg: '/static/2.png', labelName: '恩豪斯', name: '建材城名称（蓝鳌路店）', address: '高新区大学路101号', time1: '2024-02-28 16:30' }, // 自定义窗口 customCallout: { anchorX: 0, anchorY: 0, display: "ALWAYS" // 常显 } }, { id: 2, //标记点id index: 1, clusterId: 1, //自定义点聚合簇效果时使用 latitude: 36.110543, // 纬度 longitude: 120.454837, // 经度 iconPath: '/static/tm.png', options: { isStore: false, img: '/static/store.png', bg: '/static/1.png', active_bg: '/static/2.png', labelName: '恩豪斯1111', name: '品牌名称（所属建材城）', address: '高新区大学路101号', time1: '2024-02-28 16:30', time2: '2024-02-28 16:30', }, // 自定义窗口 customCallout: { anchorX: 0, anchorY: 0, display: "ALWAYS" // 常显 } }, ], } }, methods: { callouttap(e){ // 点击气泡 console.log(e.detail); } } } </script> <style lang="scss"> // 地图标记点 .marker-box { position: relative; display: flex; // align-items: center; justify-content: center; color: #fff; font-size: 28rpx; overflow: visible; } </style> 