uni-app 地图的点击事件在H5环境下会触发2次事件

操作步骤：

    @tap="tap"  
    @markertap="markertap"  
    @callouttap="callouttap"  
    @regionchange="onRegionchange"  
  ``

### 预期结果：

@tap="tap"  
@markertap="markertap"  
@callouttap="callouttap"  
@regionchange="onRegionchange"

实际结果：

    @tap="tap"  
    @markertap="markertap"  
    @callouttap="callouttap"  
    @regionchange="onRegionchange"  
  ``

### bug描述：
```
<map
@tap="tap"
@markertap="markertap"
@callouttap="callouttap"
@regionchange="onRegionchange"  
>

</map>

在H5环境下，使用高德地图，    @markertap  @callouttap 都会执行2次。  

vue的模式下@markertap  @callouttap 都会执行2次。  

nvue的模式下@markertap  @callouttap 不会执行
```

| 项目信息          | 描述                         |
|-------------------|------------------------------|
| 产品分类          | uniapp/H5                    |
| PC开发环境        | Mac                          |
| PC开发环境版本号  | 13.0 (22A380)                |
| 浏览器平台        | Chrome                       |
| 浏览器版本        | 版本 123.0.6312.86（正式版本） (arm64) |
| 项目创建方式      | CLI                          |
| CLI版本号         | 3.7.11                       |

zlyuanteng 1楼•9 天前

而且callouttap事件在h5中返回的markerId为NaN,楼主这个问题解决了么

gougou168 2楼•9 天前

没解决，本来无法获取，官网给说明了。

itying888 3楼•9 天前

在 uni-app 中，地图组件的点击事件在 H5 环境下可能会触发两次，这通常是由于 H5 环境下的事件冒泡机制或事件绑定的重复导致的。以下是一些可能的解决方案：

1. 使用 `[@click](/user/click).native` 代替 `[@click](/user/click)`

在 H5 环境下，[@click](/user/click) 事件可能会被触发两次，可以尝试使用 [@click](/user/click).native 来绑定原生点击事件，避免事件的重复触发。

<template>
  <map [@click](/user/click).native="handleMapClick"></map>
</template>

<script>
export default {
  methods: {
    handleMapClick(event) {
      console.log('地图点击事件', event);
    }
  }
}
</script>

2. 使用 `@tap` 事件

如果使用的是 uni-app 的 map 组件，可以尝试使用 @tap 事件，@tap 是 uni-app 提供的事件，可能会避免 H5 环境下的重复触发问题。

<template>
  <map @tap="handleMapTap"></map>
</template>

<script>
export default {
  methods: {
    handleMapTap(event) {
      console.log('地图点击事件', event);
    }
  }
}
</script>

3. 防抖处理

如果事件仍然会触发两次，可以考虑使用防抖函数来确保事件只执行一次。

<template>
  <map [@click](/user/click)="debounceHandleMapClick"></map>
</template>

<script>
export default {
  methods: {
    debounceHandleMapClick(event) {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.handleMapClick(event);
      }, 100);
    },
    handleMapClick(event) {
      console.log('地图点击事件', event);
    }
  }
}
</script>

4. 检查事件绑定

确保没有在代码中重复绑定了事件，或者在其他地方也绑定了相同的事件处理函数。

5. 使用 `[@click](/user/click).stop`

如果事件冒泡导致了重复触发，可以使用 [@click](/user/click).stop 来阻止事件冒泡。

<template>
  <map [@click](/user/click).stop="handleMapClick"></map>
</template>

<script>
export default {
  methods: {
    handleMapClick(event) {
      console.log('地图点击事件', event);
    }
  }
}
</script>

6. 检查 uni-app 版本

如果你使用的是较旧版本的 uni-app，可能存在已知的 bug。尝试更新到最新版本，看看问题是否得到解决。

7. 使用 `[@click](/user/click).once`

如果你只需要事件触发一次，可以使用 [@click](/user/click).once，这样事件只会触发一次。

<template>
  <map [@click](/user/click).once="handleMapClick"></map>
</template>

<script>
export default {
  methods: {
    handleMapClick(event) {
      console.log('地图点击事件', event);
    }
  }
}
</script>