kidd
kidd
  • 发布:2023-12-14 11:27
  • 更新:2023-12-14 19:19
  • 阅读:295

【报Bug】map组件内部如果有其他标签带有点击事件,会和map上方的标签冲突,出现一起奇葩现象

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win11专业版21H2

HBuilderX类型: 正式

HBuilderX版本号: 3.98

第三方开发者工具版本号: stable 1.06.2308310

基础库版本号: 3.2.2

项目创建方式: HBuilderX

App下载地址或H5⽹址: 小程序代码片段:https://developers.weixin.qq.com/s/2DMonqml7ENF

示例代码:
<template>  
    <view class="my-wrap">  
        <view>  
            <view v-if="showTs" @click="onclickOne">  
                1  
            </view>  
        </view>  
        <view class="my-map-wrap">  
            <map id="jsmap" class="my-map" enable-3D="true" show-scale="true"  
                 enable-building="true"  
                 show-location="true"  
                 :scale="19"  
                 @markertap="onClickMarker">  
                <view>  
                    <button @click="onClickMapControlGetLocal">地图定位图标</button>  
                </view>  
            </map>  
        </view>  
        <view>  
            <button @click="onClickTs">开始测试</button>  
        </view>  
    </view>  
</template>  
<script>  

export default {  
    data() {  
        return {  
            map: {  
                longitude: 111.411067,  
                latitude: 22.189381,  
                scale: 19,  
                markers: [],  
            },  
            g_map: null,  
            showTs: false,  
        }  
    },  
    onLoad() {  

    },  
    onReady() {  
        this.init();  

    },  
    methods: {  
        init() {  
            this.g_map = uni.createMapContext('jsmap');  

            this.getLocation();  
        },  
        getLocation() {  

            this.g_map.moveToLocation({  
                longitude: this.map.longitude,  
                latitude: this.map.latitude,  
                success: (res) => {  
                    wx.showToast({  
                        title: '定位成功',  
                        icon: 'success',  
                        duration: 2000  
                    })  
                },  
                fail: (res) => {  
                    console.log('moveToLocation fail:' + JSON.stringify(res));  

                }  
            });  

            let marker = {  
                id: 1,  
                latitude: this.map.latitude,  
                longitude: this.map.longitude,  
                width: 60,  
                height: 60,  
            };  

            this.g_map.addMarkers([marker]);  

            this.g_map.addMarkers({  
                markers: [marker],  
                clear: true, // 是否先清空地图上所有 marker  
                success: (res) => {  
                    // console.log('addMarkers success:' + JSON.stringify(res));  
                },  
                fail: (res) => {  
                    console.log('addMarkers fail:' + JSON.stringify(res));  
                }  
            });  

        },  
        onClickMarker(e) {  
            wx.showToast({  
                title: '你已经点击了Marker',  
                icon: 'success',  
                duration: 2000  
            })  
        },  
        onclickOne() {  
            wx.showToast({  
                title: '你已经点击了1',  
                icon: 'success',  
                duration: 2000  
            })  
        },  
        onClickTs() {  
            this.showTs = true;  
        },  
        onClickMapControlGetLocal() {  
            wx.showToast({  
                title: '你已经点击了地图定位按钮',  
                icon: 'error',  
                duration: 2000  
            })  
        }  
    }  
}  
</script>  

<style scoped lang="scss">  

.my-wrap {  
    display: flex;  
    height: 100%;  
    flex-direction: column;  
    background: #F5F5F5;  
}  

.my-map-wrap {  
    flex: 1;  
    overflow: hidden;  

    .my-map {  
        width: 100%;  
        height: 100%;  
    }  

}  
</style>

操作步骤:

1。等待定位成功,见到地图中间出现一个红色坐标图标
2。这时候(正常的时候),点击这个红色定位图标,会提示”你已经点击了Marker”
3。点击下方的”开始测试”按钮,这时候的map上方左上角,会出现一个1字
4。这时候,再次点击地图中的那个红色图标,会提示”你已经点击了地图定位按钮”

预期结果:

预期是无论什么情况下,点击地图中红色图标,都提示”你已经点击了Marker”

实际结果:

实际是在map上方出现任意标签变动后(则是点击了开始测试按钮后,map上方出现了1后),再次点击地图红色图标,会触发map组件内部的任意一个标签的点击事件。有时候会触发第一个,有时候会触发第二个(如果你的map里面有其他view的点击事件)。

bug描述:

先说明,这个bug,在微信小程序原生语法下,是没问题的,说明是uniapp的问题。具体可以用下面提供的微信小程序代码片段进行验证。

情况是这样,我希望map里面的marker,无论什么情况下,点击都能执行一样的逻辑。但是,发现,当动态控制map组件上方的dom动态出现的情况下,这个dom是否出现,会直接影响map里的marker的点击事件逻辑。

要满足这个bug的出现,需要满足这几个条件:
1。map组件上方的dom需要动态出现,不是静态写死。
2。map组件上方的dom,需要有点击事件,例如@click="",也行。
3。map组件内部,需要有至少一个dom(一般map上都会放一个定位到我的位置的按钮),并且这个dom需要声明到点击事件,例如@click="",也行。

这时候,按照我下面的复现步骤执行,就会复现这个bug。这个bug在开发工具上不会出现,只有真机(android和ios都有,预览调试方式,和体验版)会出现。

而且当出现bug的时候,在手机端的小程序调试模式的窗口里(注意,不能用微信开发工具的真机调试模式,要用预览方式调试),可以看到一句蓝色的异常:Invoke event eX in component:page/。。。。这个X,可能是1,2,3,4,这个视乎你的map组件内部有多少个dom声明了点击事件,这个bug随机执行了哪个事件,X就是几-1。网上也有人提过这个bug,具体可以参考这里→链接

目前我只能把这个map上方的dom,挪到map的下方,就不会出现这个问题。期待官方能修复。

2023-12-14 11:27 负责人:YUANRJ 分享
已邀请:

最佳回复

YUANRJ

YUANRJ

经排查,该问题是由于微信小程序map组件markertap事件在真机上动态绑定无效导致,已向微信开发者社区反馈,可以先使用v-show绕过,后续可在帖子跟进。

  • kidd (作者)

    大佬,我相信你的推断。只是想请教一下,为什么挪到下方,或者用v-show,就没问题?按照你的代码片段来看,是动态修改了bindmarkertap的点击事件名字。而我的这个例子,并没有改动过bindmarkertap的事件名字。这也是同一个bug导致吗?

    2023-12-15 10:20

  • YUANRJ

    回复 kidd: uni-app在小程序端绑定事件的元素每次切换v-if时,会动态更改后面元素所绑定的事件名,所以你挪到下方或使用v-show是不会动态更改bindmarkertap的事件名。uni-app 后续也会考虑优化这个问题。

    2023-12-15 11:29

YUANRJ

YUANRJ

感谢反馈,这边排查下。

要回复问题请先登录注册