uniapp 微信小程序的map地图怎么@markertap和@tap同时触发了?

想要点击标记出来详情,点击空白处关闭详情,但是点击标记两个事件都触发了

img

点击空白处的话,只触发自己:

img

回答来自chatgtp

在uniapp中,如果同时在map组件上监听了@markertap@tap事件,则当用户点击标记点时,这两个事件都会被触发。

如果你只需要@markertap事件被触发,则可以在map组件上移除@tap事件监听即可。例如:

<map
  :longitude="longitude"
  :latitude="latitude"
  @markertap="onMarkerTap"
>
  <!-- 这里没有监听@tap事件 -->
</map>

如果你需要同时监听@markertap@tap事件,并且在点击标记点时只触发@markertap事件,则需要在@tap事件回调函数中判断点击的位置是否为标记点。

例如:

<map
  :longitude="longitude"
  :latitude="latitude"
  @tap="onTap"
  @markertap="onMarkerTap"
>
</map>

methods: {
  onTap(e) {
    // 判断是否点击的是标记点
    if (e.markers && e.markers.length) {
      return;
    }
    // 否则触发普通的tap事件
    console.log('tap event');
  },
  onMarkerTap(e) {
    // 触发@markertap事件
    console.log('markertap event');
  }
}

在上面的代码中,我们在@tap事件的回调函数中判断点击的是否为标记点。如果是,则直接返回,不执行后面的代码,避免触发@tap事件;否则,执行普通的tap事件。同时,在@markertap事件的回调函数中,可以处理点击标记点的逻辑。