微信小程序 操作map组件(拖拽、缩放等等)时 bindregionchange事件执行多次的解决办法

最近在做小程序端的 地图附近列表数据展示的功能，这一块我用了3个核心的功能：微信小程序的map组件 + 微信小程序的地图API + 腾讯地图的 微信小程序JavaScript SDK。
微信小程序的map组件实现了地图的加载显示。
微信小程序的地图API实现了拖拽、缩放地图后，地图中心点的获取。
腾讯地图的 微信小程序JavaScript SDK。实现了根据当前位置的经纬度或者地图中心点位置的经纬度 反编译附近的地理位置的详情信息。

实现的过程中遇到了不少坑，这里列举一下，避免像我一样踩坑。

• 这一块我想具体实现的功能是：通过拖拽地图，获取拖拽后的地图中心点，然后获取地图中心点附近的前4条位置信息展示到列表上。

• 所以我就开始理了一下逻辑：首先通过bindregionchange事件监听地图的拖拽，然后监听到之后，利用微信小程序地图API的getCenterLocation函数获取当前地图中心的经纬度，最后利用腾讯地图的reverseGeocoder函数实现获取地图中心点附近的前4条位置。

• 代码写好了之后，发现bindregionchange频繁调用，近而引起后续的逻辑多次执行(getCenterLocation函数执行多次、reverseGeocoder函数执行多次)。问题是出现在bindregionchange频繁调用上。

• 后来仔细想了一下，之前在做app端的地图功能时(使用的是百度地图JS)，发现了一个问题,监听地图的移动事件map.addEventListener('moveend', mapMoveend);// 移动结束监听后，缩放地图或者缩放同时移动地图，会�有两次的moveend的回调，解决办法是在moveend回调里面判断地图前后缩放如果不一样就不再往下执行移动的移动if (map.getZoom() != 14) return;，保证了moveend只执行移动的逻辑。(缩放有缩放的逻辑，也有相应的事件监听，app端的不再赘述了)。

针对上面的分析，解决办法如下

map组件上添加了 bindregionchange事件，该事件的作用是视野发生变化时触发，也就是说当你缩放地图(scale)、拖拽地图(drag)、旋转地图(rotate)等一些操作的时候会触发。因此在bindregionchange函数中写如下代码即可解决问题

// 视野发生变化时触发
bindregionchangeClick: function (e) {
  console.log("地图位置改变了" + JSON.stringify(e));
  if (e.causedBy == "scale" || e.causedBy == "drag") {
    // 获取地图位置改变后的中心点经纬度以及获取中心点附近的位置信息
    this.getCenterLocationFunc();
  }else{
    console.log("其余事件不执行逻辑");
  }
},

整体效果如下

image.png