曲靖做网站公司,成都公租房官方网站,廊坊网站排名方案,企业精神标语需求是根据后端返回数据在地图上显示标记点#xff0c;并且根据数据状态控制标记点颜色#xff0c;标记点背景通过两张图片实现控制
mapstylewidth: 100vw; height: 100vh;:markersmarkers:longitudelocaInfo.longitude:latitude并且根据数据状态控制标记点颜色标记点背景通过两张图片实现控制
mapstylewidth: 100vw; height: 100vh;:markersmarkers:longitudelocaInfo.longitude:latitudelocaInfo.latitudemarkertapmarkerClickcallouttapcallouttap!-- 使用callout进行自定义 --cover-view slotcallouttemplate v-for(item,index) in markers cover-view styleposition: relative; width: 100%;padding-right: 20px;:marker-iditem.id:keyindexcover-view classmarker-box stylepadding: 5px 5px 12px 5px;cover-image classposition-absolute stylemargin-right: 5px; width: 30rpx; height: 30rpx; :srcitem.options.img/cover-imagecover-view{{item.options.labelName}}/cover-viewcover-image classposition-absolute styleposition: absolute; left: 0;top: 0; z-index: -1; width: 100%; height: 100%; :srcitem.options.isStore?item.options.active_bg:item.options.bg/cover-image/cover-viewcover-view styleposition: 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
/mapscriptexport default {data() {return {storeIndex:0,locaInfo: {longitude:120.445172,latitude:36.111387},markers: [ // 标点列表{id: 1, //标记点idindex: 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, //标记点idindex: 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 langscss// 地图标记点.marker-box {position: relative;display: flex;// align-items: center;justify-content: center;color: #fff;font-size: 28rpx;overflow: visible; }/style
