微信小程序也可以实现定位打卡/签到打卡了（附源码）

"dependencies": {
  "@rattan/location":"1.0.2",
},

<template>
  <view class="page-content">
  <view style="padding-top: 200rpx;">
  </view>
  <view style="margin: 20rpx;padding: 10rpx;background: #FFFFFF;">
    <view style="padding: 20rpx;color: 666666;">
    <view style="color: #000000;">
      1、当前经纬度:
    </view>
    <view style="margin-left: 20rpx;">
      经度:{{cData.curPos.lon}}
    </view>
    <view style="margin-left: 20rpx;">
      纬度:{{cData.curPos.lat}}
    </view>
    <view style="padding: 20rpx;color: #000000;">
      2、目的地经纬度:
    </view>
    <view style="margin-left: 20rpx;">
      经度:{{cData.desPos.lon}}
    </view>
    <view style="margin-left: 20rpx;">
      纬度:{{cData.desPos.lat}}
    </view>
    </view>
    <view style="padding: 20rpx;color: 666666;">
    <view style="color: #000000;">
      3、设定{{cData.rangeMeter}}米属于范围区间内：
    </view>
    <view style="margin-left: 20rpx;">
      距离目的地：{{cData.curDis}}米
    </view>
    <view style="margin-left: 20rpx;">
      {{cInRangeStr}}
    </view>
    </view>
    <view style="padding: 20rpx;">
    <view v-if="cNOLocationTips.length > 0" style="color: #000000;">
      4、未权限提示：
    </view>
    <view v-for="(item,index) in cNOLocationTips" :key="index">
      <view class="auth-tips" style="margin-left: 20rpx;">
      {{item}}
      </view>
    </view>
    </view>
  </view>
  </view>
</template>
<script>
  import func from "@rattan/location/func.js"
  import zmLoc from "@rattan/location/index.js"
  export default {
  components: {
  },
  data() {
    return {
    cData: { // 自定义判断字段
      curPos: { // 当前经纬度定位
      lat: 24.46667,
      lon: 118.184761,
      },
      desPos: { // 目的地经纬度
      lat: 24.490107,
      lon: 118.184861,
      },
      curDis: 10000, //与目标距离  单位:米
      rangeMeter: 1000, //范围区间，单位:米
      isInRange: false, //是否在打卡范围内
      // ------ 定位启闭状态 ------
      isLocationMobileSystem: true, // 手机系统
      isLocationWechatApp: true, // 微信app，如果手机系统定位关闭，那么微信app定位也是关闭状态
      isLocationByMiniProgram: true, // 微信小程序
    },
    }
  },
  computed: {
    // 定位没有打开提示文案
    cNOLocationTips() {
    let _arr = []
    if (this.cData.isLocationMobileSystem == false) {
      _arr.push("* 请打开手机和微信应用定位服务")
    } else if (this.cData.isLocationMobileSystem == true &&
      this.cData.isLocationWechatApp == false) {
      _arr.push("* 请打开微信应用定位服务")
    }
    if (this.cData.isLocationByMiniProgram == false) {
      _arr.push(
      "* 请打开小程序定位服务，点击右上角···，点击设置"
      )
    }
    return _arr
    },
    // 是否进入区间范围提示
    cInRangeStr() {
    return this.cData.isInRange ? "已进入范围区间" : "未进入范围区间";
    },
  },
  onLoad(options) {
    this.addMonitor()
  },
  onUnload(options) {
    this.removeMonitor()
  },
  onShow(options) {
    this.openPosition();
  },
  onHide(options) {
    this.closePosition();
  },
  methods: {
    // 开启定位
    openPosition() {
    const systemInfo = uni.getSystemInfoSync()
    // 模拟器没有这两个字段，设置默认打开
    if (systemInfo.locationEnabled != undefined &&
      systemInfo.locationAuthorized != undefined) {
      // 手机系统定位开关
      this.cData.isLocationMobileSystem = systemInfo.locationEnabled;
      // 微信app定位开关，如果手机系统定位关闭，那么微信app定位也会一起关闭
      this.cData.isLocationWechatApp = systemInfo.locationAuthorized
      console.log("手机系统定位开关:", this.cData.isLocationMobileSystem)
      console.log("微信应用定位开关:", this.cData.isLocationWechatApp)
    }
    zmLoc.zmStartMonitor()
    },
    // 关闭定位
    closePosition() {
    zmLoc.zmEndMonitor();
    },
    // 添加监听
    addMonitor() {
    let that = this;
    // 定位监听 - 成功回调
    uni.$on('iAuthorityOpen', (res) => {
      console.log("小程序定位开关:", res)
      if (that.cData.isLocationByMiniProgram != res) {
      that.cData.isLocationByMiniProgram = res;
      }
    })
    // 定位监听 - 成功回调
    uni.$on('iLocationSuc', (res) => {
      console.log('iLocationSuc:', JSON.stringify(res))
      if (!that.$u.test.isEmpty(res)) {
      that.cData.curPos = {
        lat: res?.latitude,
        lon: res?.longitude,
      }
      }
      if (!that.$u.test.isEmpty(that.cData.desPos) &&
      !that.$u.test.isEmpty(that.cData.curPos)) {
      that.checkDistanceAndRange()
      } else {
      console.log("======没有返回经纬度对象")
      that.cData.isInRange = false;
      }
    })
    // 定位监听 - 失败回调
    uni.$on('iLocationErr', (e) => {
      console.log("iLocationErr_e:", JSON.stringify(e));
    })
    },
    // 移除监听
    removeMonitor() {
    zmLoc.zmEndMonitor();
    // 结束定位监听
    uni.$off('iAuthorityOpen');
    uni.$off('iLocationSuc');
    uni.$off('iLocationErr');
    },
    // 计算距离和是否在打卡区间
    checkDistanceAndRange() {
    // 单位：米
    this.cData.curDis = (func.zmCalcuDistance(
      this.cData.curPos.lat,
      this.cData.curPos.lon,
      this.cData.desPos.lat,
      this.cData.desPos.lon) * 1000).toFixed(1)
    console.log("curDis：", this.cData.curPos.lat, "，", this.cData.curPos.lon)
    console.log("desDis：", this.cData.desPos.lat, "，", this.cData.desPos.lon)
    console.log("距离：", JSON.stringify(this.cData.curDis), "米")
    this.cData.isInRange = this.cData.curDis <= this.cData.rangeMeter ? true : false;
    },
  },
  }
</script>
<style lang="scss" scoped>
  .page-content {
  width: 100%;
  height: 100%;
  background: #F5F9FC;
  .auth-tips {
    padding-bottom: 12rpx;
    width: 100%;
    text-align: left;
    font-size: 24rpx;
    color: #FF0000;
  }
  }
</style>