用微信小程序写1个在地图触摸拖动时带拖动范围框的demo

下面是一个示例代码，可以实现在地图上触摸拖动时带有拖动范围框的微信小程序：

// index.js
Page({
  data: {
    mapWidth: 0,
    mapHeight: 0,
    startX: 0,
    startY: 0,
    moveX: 0,
    moveY: 0,
    rangeLeft: 0,
    rangeTop: 0,
    rangeWidth: 0,
    rangeHeight: 0,
    rangeVisible: false
  },

  onLoad: function() {
    // 获取地图宽高
    const query = wx.createSelectorQuery()
    query.select('.map').boundingClientRect((res) => {
      this.setData({
        mapWidth: res.width,
        mapHeight: res.height
      })
    }).exec()
  },

  onTouchStart: function(e) {
    this.setData({
      startX: e.touches[0].clientX,
      startY: e.touches[0].clientY
    })
  },

  onTouchMove: function(e) {
    const moveX = e.touches[0].clientX - this.data.startX
    const moveY = e.touches[0].clientY - this.data.startY

    // 计算范围框的位置和大小
    const rangeLeft = Math.min(this.data.startX, this.data.startX + moveX)
    const rangeTop = Math.min(this.data.startY, this.data.startY + moveY)
    const rangeWidth = Math.abs(moveX)
    const rangeHeight = Math.abs(moveY)

    // 检查范围框是否超出地图边界
    if (rangeLeft < 0 || rangeTop < 0 || rangeLeft + rangeWidth > this.data.mapWidth || rangeTop + rangeHeight > this.data.mapHeight) {
      return
    }

    this.setData({
      moveX: moveX,
      moveY: moveY,
      rangeLeft: rangeLeft,
      rangeTop: rangeTop,
      rangeWidth: rangeWidth,
      rangeHeight: rangeHeight,
      rangeVisible: true
    })
  },

  onTouchEnd: function() {
    this.setData({
      startX: 0,
      startY: 0,
      moveX: 0,
      moveY: 0,
      rangeVisible: false
    })
  }
})

<!-- index.wxml -->
<view class="container">
  <view class="map" bindtouchstart="onTouchStart" bindtouchmove="onTouchMove" bindtouchend="onTouchEnd">
    <view class="range" hidden="{{!rangeVisible}}" style="left: {{rangeLeft}}px; top: {{rangeTop}}px; width: {{rangeWidth}}px; height: {{rangeHeight}}px;"></view>
  </view>
</view>

/* index.wxss */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.map {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: #ccc;
}

.range {
  position: absolute;
  border: 2px dashed #f00;
  pointer-events: none;
}

这个示例中，map代表地图容器，range代表拖动范围框。当在地图上触摸拖动时，通过计算触摸点的位移来确定范围框的位置和大小，并且检查范围框是否超出地图边界。拖动范围框的样式通过动态设置style属性来实现