map内使用自定义气泡，如何实现点击气泡和点击气泡内的内容分别触发不同的方法

markers="markers" @callouttap='callouttap'> <!-- 自定义气泡窗口 -->
<cover-view slot="callout">
<template v-for="(item,index) in markers">
<cover-view class="callout" :marker-id="item.id" :class="{ active: item.active }">
<cover-view class="circle">
标题
</cover-view>
<cover-view class="titleBox">
<cover-view class="title1" @click="showDis()">
内容1
</cover-view>
<cover-view class="title2">
内容2
</cover-view>
</cover-view>
</cover-view>
</template>
</cover-view>
</map>
</view>
</template>
<script>
export default {
data() {
return {
longitude: 115.3974770000,
latitude: 35.9086920000,
scale: 13,
markers: [{
id: 1,
latitude: 35.9086920000,
longitude: 115.3974770000,
zIndex: '1',
iconPath: '/static/index/ziwodingwei.png',
width: 40,
height: 40,
customCallout: {
anchorY: 0,
anchorX: 0,
display: 'ALWAYS'
},
}]
}
},
onLoad(option) {
this.map = uni.createMapContext('myMap');
},
methods: {
// 点击标记点对应的气泡时触发
callouttap(e) {
console.log("点击气泡")
},
// 点击内容
showDis(e) {
console.log("点击内容")
},
}
}
</script>
<style lang="scss" scoped>
.callout {
display: flex;
align-items: center;
background-color: #fff;
padding: 20rpx;
border-radius: 10rpx;
}

.circle {
width: 60rpx;
height: 60rpx;
line-height: 60rpx;
border-radius: 50%;
background: #fff2ec;
font-size: 24rpx;
text-align: center;
color: #fe7902;
margin-right: 10rpx;
/ 默认z-index值 /
z-index: 1;

}
.active {
/ 激活状态的气泡z-index值更高 /
z-index: 9999;

}
.titleBox {
display: inline-block;
// display: flex;
// flex-direction: column;
}
.title1 {
min-width: 140rpx;
font-weight: 500;
font-size: 32rpx;
}
.title2 {
min-width: 60rpx;
float: left;
margin-left: 5rpx;
font-size: 24rpx;
color: #9a9899;
}
</style>