uniapp map组件自定义markers标记点

需求是根据后端返回数据在地图上显示标记点，并且根据数据状态控制标记点颜色，标记点背景通过两张图片实现控制

<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>

原文地址：https://blog.csdn.net/qq_44161722/article/details/140637658

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！