前端基于百度地图实现考勤签到功能

考勤打卡关键点：获取当前位置、设置考勤点、计算两点距离判断是否在范围内。

引入百度地图API

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

创建地图容器allmap

<div> <img src="" alt="" /> <h4>地点打卡</h4>` </div> <div></div> <div> <div></div> <div>地点打卡</div> </div>

创建地图，获取当前定位以及设置考勤地点定位，进行距离比较

<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>

样式

<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>

效果图