vue实现定位打卡功能

实现定位打卡功能的步骤

获取用户地理位置
使用浏览器提供的 Geolocation API 获取用户当前位置坐标。在 Vue 中可以通过 navigator.geolocation 调用，需注意处理用户拒绝授权的情况。

methods: {
  getLocation() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        position => {
          this.latitude = position.coords.latitude;
          this.longitude = position.coords.longitude;
        },
        error => {
          console.error("定位失败:", error.message);
        }
      );
    } else {
      alert("浏览器不支持地理定位");
    }
  }
}

前端界面设计
创建打卡按钮和位置显示区域，使用 Vue 数据绑定动态更新位置信息。

<template>
  <div>
    <button @click="getLocation">获取位置并打卡</button>
    <p v-if="latitude">纬度: {{ latitude }}</p>
    <p v-if="longitude">经度: {{ longitude }}</p>
  </div>
</template>

后端接口对接
将获取的坐标通过 HTTP 请求发送至后端服务器，建议使用 Axios 库处理网络请求。

import axios from 'axios';

methods: {
  submitCheckIn() {
    axios.post('/api/checkin', {
      lat: this.latitude,
      lng: this.longitude,
      userId: '当前用户ID'
    }).then(response => {
      alert("打卡成功");
    }).catch(error => {
      console.error("提交失败:", error);
    });
  }
}

距离校验逻辑
后端需实现坐标校验，判断用户是否在允许打卡范围内（如公司周边 500 米）。示例使用 Haversine 公式计算两点间距离：

$$ d = 2r \arcsin\left(\sqrt{\sin^2\left(\frac{\phi_2 - \phi_1}{2}\right) + \cos\phi_1 \cos\phi_2 \sin^2\left(\frac{\lambda_2 - \lambda_1}{2}\right)}\right) $$

其中 $\phi$ 为纬度，$\lambda$ 为经度，$r$ 为地球半径。

历史记录展示
通过调用后端接口获取打卡记录，使用 Vue 列表渲染展示历史数据。

<ul>
  <li v-for="record in records" :key="record.id">
    {{ record.time }} - 位置: {{ record.lat }}, {{ record.lng }}
  </li>
</ul>

注意事项

• 需在 HTTPS 环境下使用定位功能（本地开发除外）
• 考虑添加加载状态和错误提示提升用户体验
• 对于敏感场景可要求用户拍照上传作为附加验证
• iOS 15+ 需要处理精确位置和模糊位置的权限差异