前言:
项目需求是用人单位设置目标打卡点,之后程序基于目标当前经纬度计算与目标经纬度的距离。此项目基于微信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("出错了")
}
至此,一个简单的考勤系统即算完成了,第一次写简书,语句可能啰嗦繁杂了些,我们可以来看一下最终的效果图:
网友评论