前言：
项目需求是用人单位设置目标打卡点，之后程序基于目标当前经纬度计算与目标经纬度的距离。此项目基于微信JSSDK，以及腾讯地图（腾讯地图的使用方式此处不做赘述，自行参考API，日后有空本人会更新一篇）；
正文：
1、 首先我们的项目需要配置公众号的安全域名，具体步骤是：先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。值得一提的是，如果想微信不弹出以下这种提示的话，可以顺便设置公众号的业务域名
2、设置安全域名后我们可以接入 JSSDK ，从而简单的实现一些较复杂的功能；
1、在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js；
2、所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每 次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数 信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名，见附录1
jsApiList: [ getLocation ] // 必填，需要使用的JS接口列表我们这里需要使用的是地理位置
});
3、wx.ready(function(){
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如 果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
wx.getLocation({
type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给 openLocation用的火星坐标，可传入'gcj02'
success: function (res) {
var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
var longitude = res.longitude; // 经度，浮点数，范围为180 ~-180。
var speed = res.speed; // 速度，以米/每秒计
var accuracy = res.accuracy; // 位置精度
}
});
});
至此，我们的准备工作基本已经做完，getLocation方法会返回用户当前位置的经纬度以及一些其他的参数；下面我们来计算用户的当前位置和目标位置距离；
3、我们可以在网上轻易的找到这种根据两点经纬度计算距离的方式,下面例举一个亲测误差较小 的demo:
function getFlatternDistance(lat1,lng1,lat2,lng2){
var f = getRad((lat1 + lat2)/2);
var g = getRad((lat1 - lat2)/2);
var l = getRad((lng1 - lng2)/2);
var sg = Math.sin(g);
var sl = Math.sin(l);
var sf = Math.sin(f);
vars,c,w,r,d,h1,h2;
var a = EARTH_RADIUS;
var fl =1/298.257;
sg = sg*sg;
sl = sl*sl;
sf = sf*sf;s= sg*(1-sl) + (1-sf)*sl;
c = (1-sg)*(1-sl) + sf*sl;
w = Math.atan(Math.sqrt(s/c));
r = Math.sqrt(s*c)/w;
d = 2*w*a;
h1 = (3*r -1)/2/c;
h2 = (3*r+1)/2/s;
returnd*(1+ fl*(h1*sf*(1-sg) - h2*(1-sf)*sg));
}
我们只需要简单的将两个点的经纬度作为参数传入参数内即可；
但是，腾讯给我们提供了更简单的方法（使用此方法的前提是已经当前页面已经接入腾讯地图）：
1、var e = new qq.maps.LatLng(latitude,longitude);//括号里是 目标打卡点的纬度经度
2、var f= new qq.maps.LatLng(latitude,longitude);//用户当前位置的纬度经度；
3 var distance= parseInt(qq.maps.geometry.spherical.computeDistanceBetween(e, f)) //此时此刻 计算出的 distance，即为两点间的直线距离
4、我们假设我们允许在目标打卡点五十米以内打卡，
if(distance<=50){
alert("打卡成功了")
}else if(distance>50){
alert（"距离打卡点超过五十米，打卡失败"）
}else{
alert("出错了")
}
至此，一个简单的考勤系统即算完成了，第一次写简书，语句可能啰嗦繁杂了些，我们可以来看一下最终的效果图：
网友评论