小程序设置地图组件的可移动的范围

1. 使用缩放视角

可以通过设置地图缩放级别的方式，限制地图可移动的范围。在小程序中，可以使用 map 组件的 `scale` 属性设置地图的缩放级别。通过设置最大和最小的缩放级别，可以限制地图可移动的范围。

例如：

<map id="map" scale="{{scale}}" bindregionchange="regionchange" longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" style="width: 100%; height: 300px;"></map>

Page({
  data: {
    scale: 14, // 地图缩放级别
    longitude: 114.06667, // 中心经度
    latitude: 22.61667, // 中心纬度
    markers: []
  },
  regionchange(e) {
    // 监听地图缩放事件
    if (e.type === 'end') {
      const { scale, longitude, latitude } = this.data;
      if (scale < 14) {
        // 缩放级别小于14时，重置地图中心点
        this.setData({
          longitude: 114.06667,
          latitude: 22.61667
        });
      }
      if (longitude < 113.5 || longitude > 114.5 || latitude < 22 || latitude > 23) {
        // 经纬度超出范围时，重置地图中心点
        this.setData({
          longitude: 114.06667,
          latitude: 22.61667
        });
      }
    }
  }
});

在上面的代码中，当地图缩放级别小于14时，将地图中心点重置为指定的经纬度。当地图中心点超出指定的经纬度范围时，也将地图中心点重置为指定的经纬度。

2. 使用地图限制区域

在高德地图和腾讯地图中，可以使用 `setLimitBounds` 方法设置地图的限制区域。在小程序中，可以通过调用 map 组件的 `getMapContext` 方法获取地图上下文，然后调用 `setLimitRegion` 方法设置地图的限制区域。

例如：

Page({
  onReady() {
    this.mapCtx = wx.createMapContext('map');
    this.mapCtx.setLimitRegion({
      // 设置地图限制区域
      southwest: {
        latitude: 22,
        longitude: 113.5
      },
      northeast: {
        latitude: 23,
        longitude: 114.5
      }
    });
  }
});

在上面的代码中，设置地图的限制区域为经度在 113.5 - 114.5 之间，纬度在 22 - 23 之间的区域。当用户拖动地图时，地图将受到限制，无法超出指定的区域。