前端基於百度地圖實現考勤簽到功能

考勤打卡關鍵點：獲取當前位置、設置考勤點、計算兩點距離判斷是否在范圍內。

1. 引入百度地圖API

<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&amp;ak=自己申請的百度ak"></script>

2. 創建地圖容器allmap

<div class="title">
      <img src="../../images/back.png" alt="" class="back" />
      <h4>地點打卡</h4>`
</div>
<div id="allmap"></div>
<div class="circle " onclick="punch()">
      <div class="time"></div>
      <div>地點打卡</div>
</div>

3. 創建地圖，獲取當前定位以及設置考勤地點定位，進行距離比較

<script type="text/javascript">
var time = document.querySelector('.time')
var myDate = new Date();
time.innerHTML = myDate.getHours() + ':' + myDate.getMinutes(); // 獲取當前時間

var map = new BMap.Map("allmap");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
var pointAttendance
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function (r) {
     if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk); // 標出自己的當前所在地
            map.panTo(r.point); // 地圖中心移動到自己的當前位置
            point = new BMap.Point(r.point.lng, r.point.lat); // 獲取自己當前位置經緯度

            var coordinate = "117.21084309, 39.1434299";// 設置考勤點經緯度 
            var arr = coordinate.split(",");// 切割經緯度
            var lon = arr[0];
            var lat = arr[1];
            pointAttendance = new BMap.Point(lon, lat);
            var circle = new BMap.Circle(pointAttendance, 500, { // 考勤地點范圍
                  fillColor: "blue", // 圓形顏色
                  strokeWeight: 1,
                  fillOpacity: 0.2,
                  strokeOpacity: 0.2
            });
            map.addOverlay(circle);
            var r = new BMap.Marker(pointAttendance);
            map.addOverlay(r); // 標出考勤點的位置
         } else {
            alert('failed' + this.getStatus());
          }
  }, { enableHighAccuracy: true })

// 簽到
function signIn() {
    var distance = map.getDistance(point, pointAttendance).toFixed(2);
    if (distance <= 500) {
      this.GetLocation()
    } else {
      alert("超出考勤地點范圍，簽到失敗")
    }
}

// 地址逆解析
function GetLocation() { 
    var geoc = new BMap.Geocoder();
    geoc.getLocation(point, function (rs) {// 獲取當前定位所在詳細地址
            var addComp = rs.addressComponents;
            var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
            alert("您已在" + address + "簽到成功")
    });
}

// 點擊簽到
function punch() {
    this.signIn()
}
</script>

4. 樣式

<style>
    .title {
      height: 44px;
      display: flex;
      align-items: center;
      font-size: 17px;
      color: #030303;
    }

    .back {
      width: 12px;
      height: 21px;
      margin-left: 10px;
    }

    h4 {
      flex: 1;
      text-align: center;
    }

    #allmap {
      width: 100%;
      height: 400px;
    }

    .circle {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: #fafafa;
      text-align: center;
      margin: 80px auto;
      font-size: 12px;
      box-shadow: 0 0 0 15px rgba(48, 52, 207, 0.5),
        0 0 0 30px rgba(48, 52, 207, 0.3),
        0 0 0 45px rgba(48, 52, 207, 0.1);
    }

    .time {
      padding-top: 20px;
      font-size: 14px;
    }
</style>

5. 效果圖