<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>

- 发布:2025-10-15 23:14
- 更新:2025-10-15 23:14
- 阅读:16
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: 11
HBuilderX类型: 正式
HBuilderX版本号: 4.66
第三方开发者工具版本号: 1.06
基础库版本号: 3.10.0
项目创建方式: HBuilderX
示例代码:
操作步骤:
<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
实际结果:
markers不应该挡住callout
markers不应该挡住callout
bug描述:
MAP组件的markers组件会挡住上面的自定义callout,在微信原生语言就不会有这样的问题
