uni-app 安卓nvue环境下 map label被icon覆盖 无法触发被覆盖部分的@labeltap

uni-app 安卓nvue环境下 map label被icon覆盖 无法触发被覆盖部分的@labeltap

产品分类:

uniapp/App

PC开发环境

操作系统 版本号
Windows WIN10 企业版

手机环境

系统 版本号 厂商 机型
Android Android 6.0 华为 MLA-AL10

页面类型:

nvue

打包方式:

云端

项目创建方式:

HBuilderX

示例代码:

<template>  
    <view class="content">  
        <map class="map" id="map1" ref="map1" :scale="scale" :longitude="location.longitude"  
            :latitude="location.latitude" :enable-zoom="enableZoom" :enable-rotate="enableRotate" :markers="markers"  
            [@labeltap](/user/labeltap)="onLabeltap" :include-points="includePoints"></map>  
    </view>  
</template>  

<script>  
    const size = uni.upx2px(140)  
    let anchorX = 20  
    const anchorY = Math.abs(((size - 36 + size) / 2))  
    const testMarkers = [  
        {  
            id: 1,  
            latitude: 39.9086920000,  
            longitude: 116.3974770000,  
            iconPath: '/static/total_icon.png',  
            width: size,  
            height: size,  
            alpha: 0.4,  
            label: {  
                x: -(anchorX),  
                y: -(anchorY),  
                fontSize: 13,  
                content: '方恒国际 阜通东大街6号',  
                color: '#ffffff',  
                textAlign: "center",  
                borderRadius: 15,  
                borderColor: '#3A77F6',  
                bgColor: '#3A77F6',  
                display: "ALWAYS",  
            }  
        }  
    ];  
    module.exports = {  
        data() {  
            return {  
                location: {  
                    longitude: 116.3974770000,  
                    latitude: 39.9086920000  
                },  
                controls: [{  
                    id: 1,  
                    position: {  
                        left: 5,  
                        top: 180,  
                        width: 30,  
                        height: 30  
                    },  
                    iconPath: '/static/logo.png',  
                    clickable: true  
                }],  
                showLocation: false,  
                scale: 13,  
                showCompass: true,  
                enable3D: true,  
                enableOverlooking: true,  
                enableOverlooking: true,  
                enableZoom: true,  
                enableScroll: true,  
                enableRotate: true,  
                enableSatellite: false,  
                enableTraffic: false,  
                polyline: [],  
                markers: testMarkers,  
                polygons: [],  
                circles: [],  
                includePoints: [],  
                rotate: 0,  
                skew: 0  
            }  
        },  
        onLoad() {},  
        mounted() {  
            this.map = uni.createMapContext("map1", this);  
        },  
        methods: {  
            onLabeltap(e) {  
                console.log('onLabeltap', e)  
            }  
        }  
    }  
</script>  

<style>  
    .content {  
        flex: 1;  
    }  

    .map {  
        width: 750rpx;  
        /* #ifdef H5 */  
        width: 100%;  
        /* #endif */  
        flex: 1;  
        background-color: #f0f0f0;  
    }  

    .scrollview {  
        /* #ifdef H5 */  
        margin-top: 240px;  
        /* #endif */  
        flex: 1;  
        padding: 10px;  
    }  

    .list-item {  
        flex-direction: row;  
        flex-wrap: nowrap;  
        align-items: center;  
        padding: 5px 0px;  
    }  

    .list-text {  
        flex: 1;  
    }  

    .button {  
        margin-top: 5px;  
        margin-bottom: 5px;  
    }  
</style>  

操作步骤:

nvue,安卓 map label 被icon被覆盖 被覆盖的部分无法触发@labeltap,请看工程代

预期结果:

在nvue下,希望安卓map的map组件所用到的label 不被icon被覆盖(lable在icon的上方且能正确触发labeltap) 被覆盖的部分无法触发@labeltap

实际结果:

nvue,安卓 map label 被icon被覆盖 被覆盖的部分无法触发@labeltap

bug描述:

image image image

map_bug.zip


更多关于uni-app 安卓nvue环境下 map label被icon覆盖 无法触发被覆盖部分的@labeltap的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

官方没有人关注和查看bug了吗

更多关于uni-app 安卓nvue环境下 map label被icon覆盖 无法触发被覆盖部分的@labeltap的实战教程也可以访问 https://www.itying.com/category-93-b0.html


你解决了吗

这是一个已知的nvue地图组件层级问题。在安卓nvue环境下,map组件的icon会覆盖label,导致被覆盖部分的labeltap事件无法触发。

目前可行的解决方案:

  1. 调整label位置:通过修改label的x、y坐标,将label移动到icon覆盖区域之外
label: {
    x: -(anchorX),
    y: -(anchorY - size/2), // 向上偏移避免被icon覆盖
    // 其他配置保持不变
}
  1. 使用callout替代label:callout的层级通常高于marker icon
callout: {
    content: '方恒国际 阜通东大街6号',
    display: 'ALWAYS',
    fontSize: 13,
    color: '#ffffff',
    bgColor: '#3A77F6',
    borderRadius: 15,
    borderColor: '#3A77F6',
    padding: 5
}
回到顶部