当前位置：首页 > news >正文

磁器口网站建设客户管理系统管理

news 2025/9/17 22:19:04

磁器口网站建设,客户管理系统管理,兰州网站建设价,县级林业网站建设管理需求是根据后端返回数据在地图上显示标记点，并且根据数据状态控制标记点颜色，标记点背景通过两张图片实现控制 <mapstyle"width: 100vw; height: 100vh;":markers"markers":longitude"locaInfo.longitude":latitude&…

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

<mapstyle="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, //标记点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 lang="scss">// 地图标记点.marker-box {position: relative;display: flex;// align-items: center;justify-content: center;color: #fff;font-size: 28rpx;overflow: visible; }</style>