uni-app map 自定义customCallout 不显示

开发环境	版本号	项目创建方式
Windows	Win10	HBuilderX

示例代码：

<template>  
    <view class="page-body">  
        <view class="page-section">  
            <map id="map1" class="mapstyle" ref="map1" style="width: 100%; height: 100%;" :markers="markers"  
                :latitude="latitude" :longitude="longitude" :scale="mapScale" [@markertap](/user/markertap)="markertap">  
                <cover-view slot="callout">  
                    <block v-for="(item, index) in markers" :key="index">  
                        <cover-view class="customCallout" :marker-id="item.id">  
                            <cover-view class="content">  
                                <cover-view  
                                    style="font-size: 14px;background-color: white;border: 1px #0d6c6c solid;border-radius: 5px;color: #0d6c6c;" >  
                                    <cover-view style="margin: 5px;padding: 3px 5px;border-bottom: 1px #0d6c6c solid;">  
                                        设备编号：2534534534</cover-view>  
                                    <cover-view style="margin: 5px;padding: 3px 5px;">定位时间：2023.01.01 09:43</cover-view>  
                                    <cover-view style="margin: 5px;padding: 3px 5px;">停留时间：2023.01.01 09:43</cover-view>  
                                    <cover-view style="margin: 5px;padding: 3px 5px;">定位时速：1.27km/h</cover-view>  
                                    <cover-view style="margin: 5px;padding: 3px 5px;white-space:pre-wrap;">  
                                        定位位置：广东省深圳市南山区科技三中路大查查大厦D栋1905  
                                    </cover-view>  
                                    <cover-view style="margin: 5px;padding: 3px 5px;">定位位置：广东省深圳市南山区给给发个给大厦G栋</cover-view>  
                                </cover-view>  
                            </cover-view>  
                        </cover-view>  
                    </block>  
                </cover-view>  
            </map>  
        </view>  
    </view>  
</template>  
<script>  
    export default {  
        data() {  
            return {  
                latitude: 30.17489176432292,  
                longitude: 120.2113267686632,  
                markers: [{  
                    id: 1,  
                    latitude: 30.174892900,  
                    longitude: 120.2113275343,  
                    iconPath: '/static/img/collect/map_pos.png',  
                    width: 30,  
                    height: 30,  
                    stationName: '',  
                    distance: 10,  
                    customCallout: {  
                        anchorY: 0,  
                        anchorX: 0,  
                        display: 'ALWAYS',  
                    }  
                }, {  
                    id: 2,  
                    latitude: 30.174894900,  
                    longitude: 120.2133285343,  
                    iconPath: '/static/img/collect/map_pos.png',  
                    width: 30,  
                    height: 30,  
                    stationName: '',  
                    distance: 20,  
                    customCallout: {  
                        anchorY: 0,  
                        anchorX: 0,  
                        display: 'BYCLICK',  
                    }  
                }, {  
                    id: 3,  
                    latitude: 30.172792900,  
                    longitude: 120.2133285343,  
                    iconPath: '/static/img/collect/map_pos.png',  
                    width: 30,  
                    height: 30,  
                    stationName: '',  
                    distance: 30,  
                    customCallout: {  
                        anchorY: 0,  
                        anchorX: 0,  
                        display: 'BYCLICK',  
                    },  
                }], // 地图上markers列表  
                customCalloutMarkerIds: [1, 2, 3],  
                mapScale: 16, // 地图默认放大倍数  
            }  
        },  
        methods: {  
            markertap(e) {  
                const that = this  
                console.log(e);  

                // let markers = this.markers  
                // markers.find(function(item, index) {  
                //  if (item.id == e.markerId) {  
                //      that.swiperCurrent = index // 点击marker 实现底部滑到相对应的站点  
                //      item.customCallout.display = 'ALWAYS' // 点击marker 显示站点名  
                //      item.width = 35  
                //      item.height = 35  
                //  } else {  
                //      item.customCallout.display = 'NONE'  
                //      item.width = 25  
                //      item.height = 25  
                //  }  
                // })  
            }  
        }  
    }  
</script>  
<style lang="less" scoped>  
    .page-body {  
        width: 100%;  
        height: 100%;  
        position: absolute;  
        overflow: hidden;  

        .page-section {  
            width: 100%;  
            height: 100%;  
            position: absolute;  
        }  

        .customCallout {  
            width: 75%;  
            box-sizing: border-box;  
            border-radius: 4rpx;  
            display: inline-flex;  
            justify-content: center;  
            align-items: center;  
        }  
    }  

    .mapstyle {  
        position: relative;  
    }  
</style>

操作步骤：

直接运行

预期结果：

点击标识点显示气泡

实际结果：

点击标识点不显示

bug描述：

使用map组件自定义气泡, callout配置正常显示, customCallout配置无法显示. 且@markertap="markertap"事件每次点击触发两次

更多关于uni-app map 自定义customCallout 不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

htzhanglong 1楼

更多关于uni-app map 自定义customCallout 不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

根据你的代码分析，自定义气泡不显示的主要原因是自定义气泡的定位问题。以下是关键问题点：

自定义气泡缺少定位样式：你的.customCallout类缺少position: absolute和定位坐标，导致气泡无法正确显示在标记点上方。需要添加：

.customCallout {
  position: absolute;
  transform: translate(-50%, -100%);
  top: 0;
  left: 0;
}

marker配置问题：确保每个marker的customCallout配置正确。你代码中第一个marker设置了display: 'ALWAYS'，应该默认显示，但缺少定位样式导致不显示。
事件触发两次：这是uni-app map组件的已知问题，通常由于冒泡事件导致。可以在事件处理函数中添加防抖：

markertap(e) {
  if (this.lastTapTime && Date.now() - this.lastTapTime < 300) {
    return;
  }
  this.lastTapTime = Date.now();
  // 处理逻辑
}