用微信小程序写1个电子围栏的demo

下面是一个简单的微信小程序电子围栏的示例代码：

在小程序的app.json文件中添加以下代码：

{
  "pages": [
    "pages/index/index"
  ],
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于显示电子围栏"
    }
  }
}

在小程序的index.wxml文件中添加以下代码：

<view class="container">
  <button bindtap="startFence">开始电子围栏</button>
  <button bindtap="stopFence">停止电子围栏</button>
  <map id="map" show-location="{{true}}" bindregionchange="onRegionChange"></map>
</view>

在小程序的index.js文件中添加以下代码：

Page({
  data: {
    fenceMarkers: [], // 电子围栏的标记点
    isFenceStarted: false, // 是否已经开始电子围栏
  },

  // 页面加载时获取用户位置
  onLoad: function () {
    wx.getLocation({
      type: 'gcj02',
      success: (res) => {
        const latitude = res.latitude
        const longitude = res.longitude
        this.setData({
          fenceMarkers: [{
            id: 0,
            latitude: latitude,
            longitude: longitude,
            width: 40,
            height: 40,
            iconPath: '/images/fence-marker.png',
            callout: {
              content: '电子围栏',
              color: '#ffffff',
              bgColor: '#000000',
              padding: 10,
              display: 'ALWAYS'
            }
          }]
        })
      }
    })
  },

  // 开始电子围栏
  startFence: function () {
    this.setData({
      isFenceStarted: true
    })
  },

  // 停止电子围栏
  stopFence: function () {
    this.setData({
      isFenceStarted: false
    })
  },

  // 监听地图区域变化事件
  onRegionChange: function (e) {
    if (this.data.isFenceStarted && e.type === 'end') {
      wx.showModal({
        title: '警告',
        content: '您已经离开电子围栏！',
        showCancel: false
      })
    }
  }
})

在小程序的index.wxss文件中添加以下代码：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
}

button {
  margin: 10px;
  padding: 10px;
  background-color: #FF5722;
  color: white;
}

在小程序的images文件夹下添加一个名为fence-marker.png的图片，作为电子围栏的标记图标。

以上代码实现了一个简单的电子围栏功能，用户点击开始电子围栏按钮后，地图会显示用户当前位置，并在该位置添加一个标记点作为电子围栏。当用户移动出电子围栏范围时，会弹出警告框提示用户已经离开电子围栏。用户点击停止电子围栏按钮后，电子围栏功能停止