微信小程序地图拖动范围框示例 - 实现地图与拖动框联动 - 常规

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

在小程序的json文件中添加地图组件和拖动框组件：

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "usingComponents": {
    "map": "/components/map/map",
    "dragbox": "/components/dragbox/dragbox"
  }
}

创建地图组件map：

在components文件夹下创建map文件夹，然后在map文件夹下创建map.wxml、map.wxss、map.js、map.json文件。

map.wxml:

<view class='container'>
  <map id='map' show-location='{{true}}' bindregionchange='onRegionChange'></map>
  <dragbox binddrag='onDrag'></dragbox>
</view>

map.wxss:

.container {
  width: 100%;
  height: 100%;
}

map {
  width: 100%;
  height: 100%;
}

map.js:

Component({
  methods: {
    onRegionChange: function (e) {
      // 监听地图拖动事件
      // 在这里可以根据地图的视野范围来更新拖动框的位置和大小
    },
    onDrag: function (e) {
      // 监听拖动框拖动事件
      // 在这里可以根据拖动框的位置和大小来更新地图的视野范围
    }
  }
})

map.json:

{
  "component": true,
  "usingComponents": {
    "dragbox": "../dragbox/dragbox"
  }
}

创建拖动框组件dragbox：

在components文件夹下创建dragbox文件夹，然后在dragbox文件夹下创建dragbox.wxml、dragbox.wxss、dragbox.js、dragbox.json文件。

dragbox.wxml:

<view class='dragbox' bindtouchmove='onTouchMove' bindtouchend='onTouchEnd'>
  <view class='box'></view>
</view>

dragbox.wxss:

.dragbox {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200rpx;
  height: 200rpx;
  background-color: rgba(0, 0, 0, 0.3);
}

.box {
  width: 100%;
  height: 100%;
  border: 2rpx dashed #fff;
}

dragbox.js:

Component({
  properties: {
    drag: {
      type: Boolean,
      value: true
    }
  },
  data: {
    startX: 0,
    startY: 0,
    moveX: 0,
    moveY: 0
  },
  methods: {
    onTouchMove: function (e) {
      if (!this.data.drag) {
        return;
      }
      let moveX = e.touches[0].clientX - this.data.startX;
      let moveY = e.touches[0].clientY - this.data.startY;
      this.setData({
        moveX: moveX,
        moveY: moveY
      });
    },
    onTouchEnd: function (e) {
      if (!this.data.drag) {
        return;
      }
      let moveX = this.data.moveX;
      let moveY = this.data.moveY;
      this.setData({
        startX: this.data.startX + moveX,
        startY: this.data.startY + moveY,
        moveX: 0,
        moveY: 0
      });
      this.triggerEvent('drag', {
        startX: this.data.startX,
        startY: this.data.startY
      });
    }
  }
})

dragbox.json:

{
  "component": true
}

以上就是一个简单的微信小程序示例，实现了地图上面拖动时带范围框的效果。在map组件的onRegionChange方法中，可以根据地图的视野范围来更新拖动框的位置和大小；在dragbox组件的onDrag方法中，可以根据拖动框的位置和大小来更新地图的视野范围。