Taro绑定小程序map组件踩坑

阅读量: 0
小程序
Taro

坑一：map组件绑定regionchange事件

在前一段时间做一个小程序地图选择地点的需求是踩到了一个深坑。

给map绑定regionchange事件时，无论我怎么滑动、缩放地图，都不会触发绑定事件，最后在利用了一切搜素引擎后的排查后，发现了mpvue仓库的一个issues，给了我灵感，

这个issues里写着：

踩坑注意：
列表中没有的原生事件也可以使用例如 bindregionchange 事件直接在 dom 上将 bind 改为@regionchange,同时这个事件也非常特殊，它的 event type 有 start 和 end 两个，导致我们无法在 handleProxy 中区分到底是什么事件，所以你在监听此类事件的时候同时监听事件名和事件类型既 <map @regionchange="functionName" @end="functionName" @start="functionName"><map>

好家伙，我就抱着试试的态度，我就照着mpvue的文档试了一下，没想到还真成了🙂

坑二：regionchange事件取值

在进一步的开发中，由于想去分别对拖动地图 和 缩放地图 做不同的操作。所以需要取到regionchange事件event中causedBy的值。

好家伙，在开发者工具中event.detail.causedBy取值一切正常，但是在真机调试的时候，却取不到，量在疑惑。后来在手机调试里打印event才发现。

开发者工具causedBy在event.detail中。而真机的causedBy，只在event中🙂

所以我在event和event.detail中都取了值进行判断。

下面附全部map代码：

// HTML部分
<map 
  id="mapId"
  class="map"
  :markers="markers"
  :latitude="mapCenterLatitude"
  :longitude="mapCenterLongitude"
  :enable-poi="true"
  :show-location="true"
  @poitap="changePoi"
  @markertap="onMarkerTap"
  @callouttap="onCalloutTap"
  @regionchange="regionChange"
  @begin="regionchangeBegin"
  @end="regionchangeEnd"
  :style="{ height: activeIpt || searchValue ? 'calc(100vh - 529px)' : 'calc(100vh - 312px)' }"
>
  <view class="local-position">
    <image class="icon-positioning" :src="require('./image/icon_positioning.svg').default"></image>
  </view>
</map>


// js部分
// 拖动地图 结束
regionchangeEnd(e) {
  console.log('@@ regionchangeEnd', e)
  console.log('@@ regionchangeEnd', e.detail)
  // 小程序 drag 和 scale 的event数据结构不一样，causedBy取值方式不同
  const { causedBy: causedByCode, centerLocation } = e.detail;
  const { causedBy: causedByPhone } = e;
  if (causedByCode == 'drag' || causedByPhone == 'drag') {
    console.log('@@ centerLocation', centerLocation);
    this.dargMap(centerLocation);
  } else if (causedByCode == 'scale' || causedByPhone == 'scale') {
    this.scaleMap();
  }
},
来必力
Valine