<map :scale="scale" style="width: 100%; height: 100%;" :enable-3D="false" :show-compass="false"
layer-style="1" subkey="*****" enable-overlooking="false"
:enable-satellite="false" :enable-traffic="false" :show-location="false" :latitude="latitude"
:longitude="longitude" :markers="covers" @tap="tapMap" @callouttap="labeltap">
<cover-view slot="callout">
<cover-view v-for="(item, index) in covers" :key="index">
<cover-view class="customCallout" :marker-id="item.id">
<cover-view class="content">
<cover-view>{{ item.title }}</cover-view>
<cover-view class="content-info">
<cover-view class="content-enpty" v-if="!item.isFull">空:8个</cover-view>
<cover-view class="content-full" v-if="item.isFull">满</cover-view>
<cover-view class="content-price">¥1.22/度</cover-view>
</cover-view>
</cover-view>
</cover-view>
</cover-view>
</cover-view>
</map>
css 如下
.customCallout {
background: linear-gradient(#5D75F5, #5d75f5d9);
color: #fff;
font-size: 12px;
padding: 6px 7px 5px 7px;
border-radius: 25rpx;
.content-info{
display: flex;
padding: 10rpx 0 0 0;
font-size: 14px;
}
.content-enpty {
background: linear-gradient(#20BB2B , #78D67F);
border-radius: 12px;
padding: 0 8px;
color: #fff;
line-height: 24px;
}
.content-full {
width: 24px;
height: 24px;
border-radius: 50%;
background: linear-gradient(#F65353 , #F69F53 );
text-align: center;
line-height: 48rpx;
}
.content-price {
line-height: 50rpx;
padding-left: 10rpx;
}
}
模拟器上显示如图
真机如图:
支持使用三角箭头吗?