微信小程序map组件触发bindmarkertap事件也会触发bindtap事件

前端 同时被 2 个专栏收录
44 篇文章 0 订阅
2 篇文章 0 订阅

 

index.wxml:

在微信小程序中使用map组件开发时遇到了一个问题,应该是官网的bug,就是当添加marker标签后同时给地图绑定bindtap事件和标签事件bindmarkertap事件,当点击marker后也会触发bindtap事件,导致不能单独对marker标签进行事件操作;

以下是解决方案:(思路阐述)

这里利用marker标签点击后会先执行bindtap事件再去执行bindmarkertap事件的特性,在点击marker标签后利用节流的方案来只执行规定事件内最后一次点击事件(即bindmarkertap事件),这样就合理地解决了这个bug

index.wxml:

// wxml
<map    
      id="myMap"
      style="width: 100%; height: 100vh;"
      latitude="{{latitude}}"
      longitude="{{longitude}}"
      markers="{{markerList}}"
      scale="{{scale}}"
      show-location
      bindmarkertap="toMarkerForm" // marker点击事件
      bindtap="toMarkerForm" // 地图点击事件
      enable-satellite="{{true}}"
    ></map>

index.js: 

// js
Page({
data: {
  event: null
},
// bindtap和bindmarkertap事件同时同意入口进行节流操作
toMarkerForm: function (e) {
  // 保存event 
  this.setData({
    event: e,
  })
  // 节流控制只执行最后一次点击事件
  throttle(this.goForm, 100)
},
goForm: function (e) {
  const { event } = this.data

  if (event) {
    if (event.type === 'markertap') {
        console.log('点击了marker')
      } else {
        console.log('点击了地图')
      }
    }
})

节流函数(util.js)

let timer = null;
const throttle = (fn, wait) => {
  let context = this;
  let args = arguments;

  if (!timer) {
    timer = setTimeout(() => {
      fn.apply(context, args);
      timer = null;
    }, wait)
  }
}

 

小伙伴如果有疑问可以第一时间评论或留言,看到后也会及时回复的,有帮助的麻烦动动手指点个赞哟

  • 4
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2020 CSDN 皮肤主题: 像素格子 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值