【报Bug】map @markertap会触发两次

分类：uni-app

bug反馈 bug提交 map uniapp

产品分类： uniapp/H5

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： Windows 10

HBuilderX类型：正式

HBuilderX版本号： 3.8.12

浏览器平台： Chrome

浏览器版本： 121.0.6167.140

项目创建方式： HBuilderX

App下载地址或H5⽹址： http://49.4.49.247:8092/phone/index.html#/pages/scenicAreaPassengerFlow/scenicAreaPassengerFlow

示例代码：

<template>  
    <view>  
        <map id="map" class="mapstyle" style="width: 100%;height: 40rem;" :latitude="lat" :longitude="lng"  
            :scale="12" :markers="covers" @markertap="markertap"></map>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello',  
                lat: 24.67915,  
                lng: 113.60165,  
                covers: [{  
                    width: 30,  
                    height: 30,  
                    id: 1,  
                    latitude: 24.67915,  
                    longitude: 113.60165,  
                    // joinCluster: true,  
                    iconPath: '/static/position.png',  
                    callout: {  
                        content: "当前景区名称\n实时客流: 12458人\n更新时间: 2022-06-18",  
                        color: '#000000',  
                        display: 'BYCLICK',  
                        fontSize: '14',  
                        bgColor: '#ffffff',  
                        textAlign: 'left'  
                    }  
                }]  
            }  
        },  
        methods: {  
            markertap(e) {  
                console.log(e)  
            },  
        }  
    }  
</script>  

<style>  

</style>

操作步骤：

新建项目，使用 hello-uniapp vue2 模板，新建bugMap页面文件，页面中使用map组件，添加 @markertap，在HBuild内置浏览器中，打印 console，并点击marker使其显示callout气泡窗口

预期结果：

控制台只打印点击一次后的marker点击信息，callout气泡窗口点击显示，再次点击关闭隐藏

实际结果：

在项目使用腾讯地图时，控制台只打印一次的点击结果，callout气泡窗口正常显示和隐藏；但在使用高德地图时，控制台打印了两次点击的结果，并且callout气泡窗口点击显示时不能常显

bug描述：

地图定位上有markers时使用@markertap 执行点击点击标记点回调会触发两次，使用@tap则不会

备注：只有在手机浏览器或者电脑浏览器的F12仿真设备调试下会出现该问题

2024-06-05 09:02 负责人:无分享

11 个回复

DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题，如果艾特我没看到，请主动私信

感谢反馈，你提到 h5 使用 map 组件，markertap会触发两次，这个是 vue2 还是 vue3 版本，有测试其他平台，比如小程序 app 吗？

代码阿尔法 (作者)

使用的是VUE2，没有测试其它平台（项目本身要求使用H5的展现形式）

2024-06-07 08:42
代码阿尔法 (作者)

您好，这个问题有解决方案了吗

2024-06-17 08:39
DCloud_UNI_OttoJi

回复代码阿尔法: 我测试了没有复现你的问题，我的操作流程是，下载 hello-uniapp vue2，打开 map 地图，添加 @markertap 打印 console，在电脑浏览器中点击相关图标，只打印一次，请你提供具体一点的操作步骤，并其他工单页面源码

2024-06-18 15:26
DCloud_UNI_OttoJi

看你评论描述应该很容易复现，请你补充更多信息吧

2024-06-18 15:27
代码阿尔法 (作者)

回复 DCloud_UNI_OttoJi:您好，根据代码（新提供的示例代码）在HBuild内置浏览器和电脑浏览器F12仿真设备调试的双重环境下，测试结果@markertap都执行两次，callout闪烁交替出现

2024-06-18 16:13
代码阿尔法 (作者)

回复 DCloud_UNI_OttoJi: marker点位中，需要出现视图弹窗callout

2024-06-21 09:00
代码阿尔法 (作者)

回复 DCloud_UNI_OttoJi: 新建项目文件使用map组件，在上述可复刻环境下，@markertap事件仍执行两次，并且marker中的callout气泡窗口 display: 'BYCLICK' 状态下无法常显

2024-06-24 13:56
代码阿尔法 (作者)

回复 DCloud_UNI_OttoJi: 下载 hello-uniapp vue2，打开 map 地图，添加 @markertap 打印 console（复现时，在使用高德地图时，问题可以完美复刻）

2024-06-24 15:29

沈工

是的，触发几次是避免不了，开发中你可以做的是要防止多次请求就行了

代码阿尔法 (作者)

是我点击一次标记点，会执行两次点击操作，而不是用户多次点击标记点

2024-06-05 09:47
沈工

回复代码阿尔法: 我的意思开发中你取一次的结果好了，其余2次3次不去管他过滤掉；我这边有时还触发3次呢

2024-06-05 10:41
代码阿尔法 (作者)

回复沈工: 回调函数接口可以过滤其它只保留一次的，但是实际回调的还是两次，marker里的callout窗口受这两次操作的影响，在打开后就立即关闭了

2024-06-05 10:46
代码阿尔法 (作者)

回复沈工: 实际效果可以看一下我提供的H5地址

2024-06-05 10:47