uni-app地图点击marker导致markerTap和tap事件同时触发

uni-app地图点击marker导致markerTap和tap事件同时触发

开发环境 版本号 项目创建方式
Windows win11 HBuilderX

操作步骤：

  • 点击marker会触发markerTap和tap事件

预期结果：

  • markertap”点击标记点时触发事件， “@tap”点击地图时触发事件

实际结果：

  • 同时触发了

bug描述：

  • 地图点击marker导致markerTap和 tap事件同时触发

更多关于uni-app地图点击marker导致markerTap和tap事件同时触发的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

直接使用微信小程序（不使用uni-app）测试，是否仍然存在此问题？

更多关于uni-app地图点击marker导致markerTap和tap事件同时触发的实战教程也可以访问 https://www.itying.com/category-93-b0.html


小程序是正常的，点击marker不会触发tap事件

回复 1***@qq.com: 好的，已反馈给相关人员排查，已加分，感谢您的反馈！

回复 DCloud_UNI_Anne: 好的

回复 DCloud_UNI_Anne: 麻烦尽快看下哈

参考这里 https://developers.weixin.qq.com/community/develop/doc/000c88350841a8b8e00999cb351800

这里我看过了，都试了没效果的。原生小程序是正常的，用uniapp编译成小程序会出现有可能是tap先执行，也有可能是markertap先执行。

在 uni-app 中使用地图组件时，当你点击 marker 时，可能会同时触发 markerTap 和 tap 事件。这是因为 markerTap 是专门用于处理 marker 点击的事件，而 tap 是地图上的通用点击事件。当你点击 marker 时，地图组件会同时触发这两个事件。

解决方法

如果你希望只处理 markerTap 事件，而忽略 tap 事件，可以通过以下方式来处理：

  1. 在 markerTap 事件中处理逻辑：在 markerTap 事件中处理与 marker 相关的逻辑，而在 tap 事件中不做任何处理。

  2. 使用标志位：在 markerTap 事件中设置一个标志位，然后在 tap 事件中根据这个标志位来决定是否执行逻辑。

示例代码

<template>
  <view>
    <map
      id="map"
      :latitude="latitude"
      :longitude="longitude"
      :markers="markers"
      @markertap="handleMarkerTap"
      @tap="handleTap"
    ></map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      latitude: 39.909,
      longitude: 116.39742,
      markers: [
        {
          id: 1,
          latitude: 39.909,
          longitude: 116.39742,
          name: 'Marker 1'
        }
      ],
      isMarkerTapped: false // 标志位
    };
  },
  methods: {
    handleMarkerTap(e) {
      this.isMarkerTapped = true; // 设置标志位
      console.log('Marker tapped:', e.markerId);
      // 处理 marker 点击逻辑
    },
    handleTap(e) {
      if (this.isMarkerTapped) {
        this.isMarkerTapped = false; // 重置标志位
        return; // 如果是 marker 点击，忽略 tap 事件
      }
      console.log('Map tapped:', e);
      // 处理地图点击逻辑
    }
  }
};
</script>
回到顶部