基于腾讯地图实现上下班打卡

前言：

项目需求是用人单位设置目标打卡点，之后程序基于目标当前经纬度计算与目标经纬度的距离。 此项目基于微信JSSDK，以及腾讯地图（腾讯地图的使用方式此处不做赘述，自行参考API，日后有空本人会更新一篇）；

正文：

1. 首先我们的项目需要配置公众号的安全域名，具体步骤是：先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。值得一提的是，如果想微信不弹出以下这种提示的话，可以顺便设置公众号的业务域名

2. 设置安全域名后我们可以接入 JSSDK ，从而简单的实现一些较复杂的功能；
   在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js；
   所有需要使用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接口列表我们这里需要使用的是地理位置
 });
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方法会返回用户当前位置的经纬度以及一些其他的参数；下面我们来计算用户的当前位置和目标位置距离；
我们可以在网上轻易的找到这种根据两点经纬度计算距离的方式,下面例举一个亲测误差较小 的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("出错了")
}

至此，一个简单的考勤系统即算完成了，第一次写，语句可能啰嗦繁杂了些，我们可以来看一下最终的效果图：