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描述:

更多关于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事件无法触发。
目前可行的解决方案:
- 调整label位置:通过修改label的x、y坐标,将label移动到icon覆盖区域之外
label: {
x: -(anchorX),
y: -(anchorY - size/2), // 向上偏移避免被icon覆盖
// 其他配置保持不变
}
- 使用callout替代label:callout的层级通常高于marker icon
callout: {
content: '方恒国际 阜通东大街6号',
display: 'ALWAYS',
fontSize: 13,
color: '#ffffff',
bgColor: '#3A77F6',
borderRadius: 15,
borderColor: '#3A77F6',
padding: 5
}

