前言：
? ? ? ? ? ? ?項目需求是用人單位設置目標打卡點陕习，之后程序基于目標當前經緯度計算與目標經緯度的距離缩麸。此項目基于微信JSSDK帐要，以及騰訊地圖（騰訊地圖的使用方式此處不做贅述府喳，自行參考API惰聂，日后有空本人會更新一篇）；
正文：
? ? ? ? ? ?1易遣、 ?首先我們的項目需要配置公眾號的安全域名彼妻，具體步驟是：先登錄微信公眾平臺進入“公眾號設置”的“功能設置”里填寫“JS接口安全域名”。值得一提的是豆茫，如果想微信不彈出以下這種提示的話侨歉，可以順便設置公眾號的業(yè)務域名
? ? ? ? ? ?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信息驗證后會執(zhí)行ready方法，所有接口調用都必須在config接口獲得結果之后哥桥，config是一個客戶端的異步操作，所以如 ?果需要在頁面加載時就調用相關接口激涤，則須把相關接口放在ready函數中調用來確保正確執(zhí)行拟糕。對于用戶觸發(fā)時才調用的接口判呕，則可以直接調用，不需要放在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("出錯了")
? ? ? ? ? ? ? ? ? ? ? ? ?}
至此，一個簡單的考勤系統(tǒng)即算完成了庆冕，第一次寫簡書康吵，語句可能啰嗦繁雜了些，我們可以來看一下最終的效果圖：
