uni-app map组件marker标注点透明度alpha设成0且用自定义气泡(插槽)时安卓手机气泡跟图标隐藏 ios正常

开发环境	版本号	项目创建方式
Mac	14.2.1 (23C71)	HBuilderX

操作步骤：

<map id="Map" :scale="scaleNum" style="width: 100%; height: 100vh" :latitude="nlat" :longitude="nlon"  
:markers="markers" @poitap="poiTap" @regionchange="regionChange" customCallout="callout"  
@callouttap="markerItemFun" show-location>  
<cover-view slot="callout">  
    <cover-view v-for="(item,index) in markers" :key="item.id">  
        <cover-view class="map-label-box" :marker-id="item.id">  
            <cover-image class="map-label-img"  
                src="https://staticfiles.ehutong.net/resources/ehutong-20240423-map-icon-1.png" mode=""> </cover-image>  
            <cover-view>{{item.distnm}}</cover-view>  
            <cover-view class="text-1"> {{item.count}}</cover-view>  
            <cover-view class="text-2">人</cover-view>  
        </cover-view>  
    </cover-view>  
</cover-view>  
</map>  

configIcon: {  
    iconPath: '/static/image/location-icon2.png',  
    width: 18,  
    height: 18,  
    alpha: 0  
},

预期结果：

<map id="Map" :scale="scaleNum" style="width: 100%; height: 100vh" :latitude="nlat" :longitude="nlon"  
:markers="markers" @poitap="poiTap" @regionchange="regionChange" customCallout="callout"  
@callouttap="markerItemFun" show-location>  
<cover-view slot="callout">  
    <cover-view v-for="(item,index) in markers" :key="item.id">  
        <cover-view class="map-label-box" :marker-id="item.id">  
            <cover-image class="map-label-img"  
                src="https://staticfiles.ehutong.net/resources/ehutong-20240423-map-icon-1.png" mode=""> </cover-image>  
            <cover-view>{{item.distnm}}</cover-view>  
            <cover-view class="text-1"> {{item.count}}</cover-view>  
            <cover-view class="text-2">人</cover-view>  
        </cover-view>  
    </cover-view>  
</cover-view>  
</map>  

configIcon: {  
    iconPath: '/static/image/location-icon2.png',  
    width: 18,  
    height: 18,  
    alpha: 0  
},

实际结果：

<map id="Map" :scale="scaleNum" style="width: 100%; height: 100vh" :latitude="nlat" :longitude="nlon"  
:markers="markers" @poitap="poiTap" @regionchange="regionChange" customCallout="callout"  
@callouttap="markerItemFun" show-location>  
<cover-view slot="callout">  
    <cover-view v-for="(item,index) in markers" :key="item.id">  
        <cover-view class="map-label-box" :marker-id="item.id">  
            <cover-image class="map-label-img"  
                src="https://staticfiles.ehutong.net/resources/ehutong-20240423-map-icon-1.png" mode=""> </cover-image>  
            <cover-view>{{item.distnm}}</cover-view>  
            <cover-view class="text-1"> {{item.count}}</cover-view>  
            <cover-view class="text-2">人</cover-view>  
        </cover-view>  
    </cover-view>  
</cover-view>  
</map>  

configIcon: {  
    iconPath: '/static/image/location-icon2.png',  
    width: 18,  
    height: 18,  
    alpha: 0  
},

bug描述：

uni-app map组件marker中的标注点透明度alpha设置成0且我用的自定义气泡(插槽) 在安卓手机上起泡跟图标全部隐藏了，ios正常

更多关于uni-app map组件marker标注点透明度alpha设成0且用自定义气泡(插槽)时安卓手机气泡跟图标隐藏 ios正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

ionicwang 1楼

请问解决了吗，我也碰到这个问题

yuanlaile 2楼

在 uni-app 中使用 map 组件时，如果你将 marker 的 alpha 属性设置为 0，并且使用了自定义气泡（通过插槽实现），可能会遇到在安卓设备上气泡和图标隐藏的问题，而在 iOS 设备上正常显示的情况。这是因为安卓和 iOS 在处理 alpha 属性时可能存在差异。

解决方案

使用 iconPath 透明图片替代 alpha 属性：你可以使用一张透明的图片作为 iconPath，而不是将 alpha 设置为 0。这样可以避免安卓设备上气泡和图标隐藏的问题。

markers: [{
    id: 1,
    latitude: 39.909,
    longitude: 116.39742,
    iconPath: '/path/to/transparent.png', // 使用透明图片
    callout: {
        content: '自定义气泡内容',
        color: '#000',
        fontSize: 14,
        borderRadius: 5,
        bgColor: '#fff',
        padding: 10,
        display: 'ALWAYS'
    }
}]

动态控制 marker 的显示：你可以通过动态控制 marker 的 alpha 属性，而不是直接设置为 0。例如，可以在需要显示气泡时，将 alpha 设置为 1，否则设置为 0。

markers: [{
    id: 1,
    latitude: 39.909,
    longitude: 116.39742,
    alpha: 1, // 初始设置为1
    callout: {
        content: '自定义气泡内容',
        color: '#000',
        fontSize: 14,
        borderRadius: 5,
        bgColor: '#fff',
        padding: 10,
        display: 'ALWAYS'
    }
}]

然后在需要隐藏时，动态更新 alpha 属性：

this.markers[0].alpha = 0;
this.$forceUpdate(); // 强制更新视图

使用 cover-view 替代自定义气泡：如果你不需要使用 marker 的 callout，而是直接使用 cover-view 来绘制自定义气泡，可以避免 alpha 属性的问题。