uni-app框架Map组件markers不应该挡住callout但是目前是挡住了

uni-app框架Map组件markers不应该挡住callout但是目前是挡住了

示例代码：

<map class="map"  latitude="30.251787999999998" longitude="120.21538799999996" :markers="points"  
@markertap="onMarkerTap" @callouttap="onMarkerTap">  
<!-- 自定义callout模板 -->  
<cover-view slot="callout">  
    <cover-view v-for="(point, index) in points" :key="index" class="custom-callout"  
    :marker-id="point.id">  
    <cover-image src='/static/jianbianBackground.png' class="callout-img"></cover-image>  
    <cover-view class="callout-icon">  
        <cover-image src="/static/pijiu.png" style="width: 100%;height: 48rpx;"></cover-image>  
    </cover-view>  
    <cover-view class="callout-content">  
        <cover-view class="callout-title">{{ point.title }}</cover-view>  
        <cover-view class="callout-location">{{ point.description }}</cover-view>  
    </cover-view>  
    <cover-view class="callout-icon">  
        <cover-image src="/static/right.png" style="width: 100%;height: 48rpx;"></cover-image>  
    </cover-view>  
</cover-view>  
</cover-view>  
</map>

操作步骤：

<map class="map"  latitude="30.251787999999998" longitude="120.21538799999996" :markers="points"  
@markertap="onMarkerTap" @callouttap="onMarkerTap">  
<!-- 自定义callout模板 -->  
<cover-view slot="callout">  
    <cover-view v-for="(point, index) in points" :key="index" class="custom-callout"  
    :marker-id="point.id">  
    <cover-image src='/static/jianbianBackground.png' class="callout-img"></cover-image>  
    <cover-view class="callout-icon">  
        <cover-image src="/static/pijiu.png" style="width: 100%;height: 48rpx;"></cover-image>  
    </cover-view>  
    <cover-view class="callout-content">  
        <cover-view class="callout-title">{{ point.title }}</cover-view>  
        <cover-view class="callout-location">{{ point.description }}</cover-view>  
    </cover-view>  
    <cover-view class="callout-icon">  
        <cover-image src="/static/right.png" style="width: 100%;height: 48rpx;"></cover-image>  
    </cover-view>  
</cover-view>  
</cover-view>  
</map>

预期结果：

markers不应该挡住callout

实际结果：

markers不应该挡住callout

bug描述：

MAP组件的markers组件会挡住上面的自定义callout，在微信原生语言就不会有这样的问题

image


更多关于uni-app框架Map组件markers不应该挡住callout但是目前是挡住了的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

同样的代码，试试原生微信小程序有没有这个问题

更多关于uni-app框架Map组件markers不应该挡住callout但是目前是挡住了的实战教程也可以访问 https://www.itying.com/category-93-b0.html


有

那我去官方反馈一下

回复 5***@qq.com: 嗯嗯

这是一个已知的uni-app Map组件层级问题。在uni-app中，Map组件的markers默认会覆盖在自定义callout上方，这与微信原生开发的行为确实存在差异。

目前可行的解决方案是：

  1. 调整marker图标尺寸：将marker的iconPath设置为较小的图标，确保callout内容能够完全显示在marker图标周围区域。

  2. 使用cover-view替代自定义callout：在map组件内部直接使用cover-view来模拟callout效果，通过动态定位控制显示位置：

<map class="map" :markers="markers" @markertap="onMarkerTap">
  <cover-view class="custom-callout" v-if="selectedMarker" :style="calloutStyle">
    <!-- callout内容 -->
  </cover-view>
</map>

在script中计算callout位置：

data() {
  return {
    selectedMarker: null,
    calloutStyle: {}
  }
},
methods: {
  onMarkerTap(e) {
    const markerId = e.markerId
    const marker = this.markers.find(item => item.id === markerId)
    this.selectedMarker = marker
    // 根据marker坐标计算callout显示位置
    this.calcCalloutPosition(marker)
  }
}
回到顶部