当前位置：首页 > VUE

vue实现考勤定位功能

2026-01-21 09:40:54VUE

实现考勤定位功能的步骤

使用Vue.js和Geolocation API获取用户位置

在Vue组件中调用浏览器Geolocation API获取用户经纬度坐标。需注意该API仅在HTTPS或localhost环境下可用。

vue实现考勤定位功能

methods: {
  getCurrentPosition() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        position => {
          this.latitude = position.coords.latitude;
          this.longitude = position.coords.longitude;
          console.log('获取位置成功:', this.latitude, this.longitude);
        },
        error => {
          console.error('获取位置失败:', error.message);
        }
      );
    } else {
      console.error('浏览器不支持Geolocation API');
    }
  }
}

集成地图服务显示位置

推荐使用高德地图或百度地图的JavaScript API，需先在项目中引入对应SDK。

vue实现考勤定位功能

<script src="https://webapi.amap.com/maps?v=2.0&key=您的高德地图KEY"></script>
<div id="map-container"></div>

mounted() {
  this.initMap();
},
methods: {
  initMap() {
    const map = new AMap.Map('map-container', {
      zoom: 16,
      center: [this.longitude, this.latitude]
    });
    new AMap.Marker({
      position: [this.longitude, this.latitude],
      map: map
    });
  }
}

实现考勤范围判断

通过计算当前位置与考勤点距离，判断是否在允许范围内（通常以米为单位）。

methods: {
  checkInRange(targetLat, targetLng, radius) {
    const R = 6371000; // 地球半径(米)
    const dLat = (targetLat - this.latitude) * Math.PI / 180;
    const dLng = (targetLng - this.longitude) * Math.PI / 180;
    const a = 
      Math.sin(dLat/2) * Math.sin(dLat/2) +
      Math.cos(this.latitude * Math.PI / 180) * 
      Math.cos(targetLat * Math.PI / 180) *
      Math.sin(dLng/2) * Math.sin(dLng/2);
    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
    const distance = R * c;
    return distance <= radius;
  }
}

提交考勤数据到后端

使用axios将定位数据与时间戳提交至服务器，建议添加加载状态和错误处理。

methods: {
  async submitAttendance() {
    try {
      this.loading = true;
      const response = await axios.post('/api/attendance', {
        lat: this.latitude,
        lng: this.longitude,
        timestamp: new Date().toISOString()
      });
      console.log('考勤成功:', response.data);
    } catch (error) {
      console.error('考勤提交失败:', error);
    } finally {
      this.loading = false;
    }
  }
}