微信小程序实现签到打卡

先在腾讯地图官网申请一个key，将key复制进代码中，使用微信开发者工具分别把对应的wxml，wxss和js复制进去后，我这里画的围栏是写死的，你可以根据你的后端把对应写死的部分赋值，代码里面都有注释要修改围栏什么的都很方便。

Page({
    data: {
      longitude: 106.47,
      latitude: 29.58,
      address: '',
      markers: [{
        id: 0,
        latitude: 29.58,
        longitude: 106.47,
        width: 50,
        height: 50
      }],
      signed: false,
      fence: {
        longitude: 106.47,
        latitude: 29.58,
        radius: 20000,
      },
      isInFence: false,
      circles: [], // 新增用于绘制围栏的 circles 属性
    },
    onLoad() {
      // 页面加载时获取用户当前地理位置信息
      wx.getLocation({
        type: 'wgs84', // 使用 WiFi 定位
        success: (res) => {
          const latitude = res.latitude;
          const longitude = res.longitude;
          console.log(res,longitude,123)
  
          // 更新页面数据中的地理位置信息和围栏经纬度信息
          this.setData({
            latitude: latitude,
            longitude: longitude,
            fence: {
              longitude: longitude,
              latitude: latitude,
              radius: 20000, // 您可以根据实际需求自定义围栏半径
            }
          });
  
          // 调用逆地理编码获取地址信息
          this.reverseGeocoding(latitude, longitude);
  
          // 检查是否在围栏内
          this.checkInFence();
  
          // 展开其他操作，例如调用其他函数或者执行其他逻辑
          // this.doSomething();
        },
        fail: (err) => {
          console.error('获取地理位置失败', err);
        }
      });
    },
    // 其他操作函数示例
    // doSomething() {
    //   console.log('展开其他操作');
    // },
  
    // 逆地理编码获取地址信息
    reverseGeocoding: function (latitude, longitude) {
      var that = this;
      wx.request({
        url: "https://apis.map.qq.com/ws/geocoder/v1/",
        data: {
          location: `${latitude},${longitude}`,
          key: "你的腾讯地图api密钥", // 替换为腾讯地图API密钥
          get_poi: 1,
        },
        success(res) {
          if (res.data.status === 0) {
            const address = res.data.result.address;
            console.log(address);
            that.setData({
              address: address,
            });
          } else {
            console.error("逆地理编码失败", res.data.message);
          }
        },
        fail(err) {
          console.error("逆地理编码请求失败", err);
        },
      });
    },
    onReady: function () {
      // 在地图上绘制围栏
      this.drawFence();
    },
    // 签到操作
    signIn: function () {
      if (this.data.isInFence) {
        // 如果在围栏内，进行签到操作
        wx.request({
          url: 'http://localhost:64352/saveClockinfo',
          method: 'POST',
          data: {
            Time: new Date(),
            UserName: wx.getStorageSync('TeacherName'),
            X: this.data.latitude,
            Y: this.data.longitude,
            Device: this.data.arress,
            Post: wx.getStorageSync('post')
          },
          success(res) {
            console.log('提交成功：', res.data);
            wx.showToast({
              title: '签到成功',
              icon: 'success',
              duration: 2000
            });
            this.setData({
              signed: true,
            });
          },
          fail(err) {
            console.error('提交失败：', err);
          },
        });
      } else {
        // 如果不在围栏内，提示无法签到
        wx.showToast({
          title: '不在围栏内，无法签到',
          icon: 'none',
          duration: 2000
        });
      }
    },
    // 绘制围栏
    drawFence: function () {
      const fence = this.data.fence;
      const circle = {
        latitude: fence.latitude,
        longitude: fence.longitude,
        radius: fence.radius,
        fillColor: "#AA000033", // 填充颜色，格式为 "#ARGB"
        color: "#FF0000", // 边框颜色
        strokeWidth: 2, // 边框宽度
      };
      // 更新页面数据中的围栏信息
      this.setData({
        circles: [circle],
      });
      console.log("drawFence called");
      console.log([circle], 1);
    },
    // 检查是否在围栏内
    checkInFence: function () {
      const fence = this.data.fence;
      const latitude = this.data.latitude;
      const longitude = this.data.longitude;
      const distance = this.calculateDistance(latitude, longitude, fence.latitude, fence.longitude);
      console.log(distance, 147);
      // 更新页面数据中的是否在围栏内的状态
      this.setData({
        isInFence: distance <= fence.radius,
      });
    },
    // 计算两点间距离
    calculateDistance: function (lat1, lon1, lat2, lon2) {
      const radLat1 = lat1 * Math.PI / 180.0;
      const radLat2 = lat2 * Math.PI / 180.0;
      const a = radLat1 - radLat2;
      const b = lon1 * Math.PI / 180.0 - lon2 * Math.PI / 180.0;
      let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
      s = s * 6378.137;
      s = Math.round(s * 10000) / 10000;
      return s * 1000;
    },
  });
  

<view class="" hover-class="none" hover-stop-propagation="false" style="width: 100%; height: 100%; position: relative;">
  <!-- 地图组件 -->
  <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" circles="{{circles}}" scale="13" show-location style="width: 100%; height: 100%;"></map>

  
  <!-- 显示经度的文本，用于调试 -->
  {{longitude}}

  <!-- 签到按钮 -->
  <button wx:if="{{!signed}}" bindtap="signIn" style="width: 80px; height: 80px; border-radius: 50%; background-color: rgba(34, 95, 151, 0.9); position: absolute; bottom: 10px; left: calc(50% - 40px); color: #fff; display: flex; align-items: center; justify-content: center;">
    <text style="font-size: 16px;">签到</text>
  </button>

  <!-- 显示已签到的文本 -->
  <text wx:if="{{signed}}" style="color: green;">已签到</text>
</view>

page{
    height: 100%;
  }