功能步骤阐述：
1.后台管理人员在后台添加签到地点
2.根据签到地点生成现场签到二维码
3.在微信页面上调用微信扫一扫功能，扫描签到二维码
4.百度定位，通过判断用户与签到地点的距离，验证签到是否成功
步骤详解：
1.在后台添加签到地点，因为涉及到第四步的距离换算，所以添加签到距离时，需要添加上地点的经纬度，这里我用的是百度地图提供的功能来获取地点的经纬度
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
#allmap {
width: 100%;
height: 300px;
overflow: hidden;
margin: 0;
font-family: "微软雅黑";
}
.btn {
margin-top: 10px;
text-align: center;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Zuhusm8MFk70SDW772VB0XBZY0us3xcZ"></script>
<title>签到地址</title>
</head>
<body>
<div id="allmap"></div>
<div class="btn">
<button id="addr">确认地址</button>
</div>
<script type="text/javascript">
// 百度地图API功能，创建地图实例
var map = new BMap.Map("allmap");
//初始化地图,设置中心点坐标和地图级别，级别3-18
var point = new BMap.Point(106.461248, 29.538835);
map.centerAndZoom(point, 16);
//允许地图缩放
map.enableScrollWheelZoom(true);
//点击事件，点击地图选址
map.addEventListener("click", function(e) {
point = e.point;
if(point) {
//清除地图上的遮挡物，这里主要清除上次点击的地点
map.clearOverlays();
//地图标点
map.addOverlay(new BMap.Marker(point));
} else {
alert("您选择地址没有解析到结果!");
}
});
var btn = document.getElementById("addr");
//通过点击确认按钮获取最后选择的地址经纬度
btn.addEventListener("click", function() {
alert('您选择的位置为：' + point.lng + ',' + point.lat);
});
</script>
</body>
</html>
2.生成二维码
我用的是phpqrcode.php
官网：http://phpqrcode.sourceforge.net/
下载地址：https://sourceforge.net/projects/phpqrcode/files/
这里贴出生成带logo的二维码代码
<?php
include 'phpqrcode.php'; //请到官网下载
$value = ''; //二维码内容，URL地址需要用微信网页授权的地址，为后面获取openid做准备
$errorCorrectionLevel = 'L';//容错级别 L M Q H
$matrixPointSize = 6;//生成图片大小 1-10
//生成二维码图片
QRcode::png($value, './temp/qrcode.png', $errorCorrectionLevel, $matrixPointSize, 2);
$logo = './temp/logo.png';//准备好的logo图片
$QR = './temp/qrcode.png';//已经生成的原始二维码图
if ($logo !== FALSE) {
$QR = imagecreatefromstring(file_get_contents($QR));
$logo = imagecreatefromstring(file_get_contents($logo));
$QR_width = imagesx($QR);//二维码图片宽度
$QR_height = imagesy($QR);//二维码图片高度
$logo_width = imagesx($logo);//logo图片宽度
$logo_height = imagesy($logo);//logo图片高度
$logo_qr_width = $QR_width / 5;
$scale = $logo_width/$logo_qr_width;
$logo_qr_height = $logo_height/$scale;
$from_width = ($QR_width - $logo_qr_width) / 2;
//重新组合图片并调整大小
imagecopyresampled($QR, $logo, $from_width, $from_width, 0, 0, $logo_qr_width,
$logo_qr_height, $logo_width, $logo_height);
}
//输出图片
imagepng($QR, 'helloweba.png');
echo '';
?>
3.微信页面调用微信扫一扫
详情查看微信的官方文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
<?php
require_once "jssdk.php";//这个类上面的文档连接里有下载
$jssdk = new JSSDK("yourAppID", "yourAppSecret");
$signPackage = $jssdk->GetSignPackage();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
wx.config({
debug: true, //开启时，会弹出调试信息，正式上线时，关闭就好了，默认为关闭的
appId: '<?php echo $signPackage["appId"];?>',
timestamp: <?php echo $signPackage["timestamp"];?>,
nonceStr: '<?php echo $signPackage["nonceStr"];?>',
signature: '<?php echo $signPackage["signature"];?>',
jsApiList: [
// 所有要调用的 API 都要加到这个列表中
'scanQRCode'
]
});
wx.ready(function() {
// 在这里调用 API
wx.scanQRCode({
needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
success: function(res) {
var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
//alert(result);
}
});
});
</script>
</html>
4.百度地图定位，判断距离签到是否成功
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Zuhusm8MFk70SDW772VB0XBZY0us3xcZ"></script>
<title>自愿者签到</title>
</head>
<body>
<div id="allmap"></div>
</body>
<script src="__PUBLIC__/cqlibWechat/js/jquery-3.2.1.min.js" ></script>
<script src="__PUBLIC__/cqlibWechat/libs/layer/layer.js"></script>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
//map.centerAndZoom("成都市", 12); //初始化地图,设置城市和地图级别。
var pointA = new BMap.Point(104.066867,30.555257);//云华路333号，签到地址
var openid = "{$openid}";//获取openid,确定签到的人
var geolocation = new BMap.Geolocation();
//浏览器定位，用手机查看网页更准确点→_→
geolocation.getCurrentPosition(function(r) {
if(this.getStatus() == BMAP_STATUS_SUCCESS) {
var pointB = new BMap.Point(r.point.lng, r.point.lat);
//alert('您的位置：' + r.point.lng + ',' + r.point.lat);
//换算两点间的距离
var jl = (map.getDistance(pointA, pointB)).toFixed(2);
if(jl>1000){
layer.msg(openid+"距离签到地点过大");
}else{
layer.msg(openid+"签到成功");
}
//var polyline = new BMap.Polyline([pointA, pointB], {
// strokeColor: "blue",
// strokeWeight: 6,
// strokeOpacity: 0.5
//}); //定义折线
//map.addOverlay(polyline); //添加折线到地图上
} else {
alert('failed' + this.getStatus());
}
}, {
enableHighAccuracy: true
})
//关于状态码
//BMAP_STATUS_SUCCESS 检索成功。对应数值“0”。
//BMAP_STATUS_CITY_LIST 城市列表。对应数值“1”。
//BMAP_STATUS_UNKNOWN_LOCATION 位置结果未知。对应数值“2”。
//BMAP_STATUS_UNKNOWN_ROUTE 导航结果未知。对应数值“3”。
//BMAP_STATUS_INVALID_KEY 非法密钥。对应数值“4”。
//BMAP_STATUS_INVALID_REQUEST 非法请求。对应数值“5”。
//BMAP_STATUS_PERMISSION_DENIED 没有权限。对应数值“6”。(自 1.1 新增)
//BMAP_STATUS_SERVICE_UNAVAILABLE 服务不可用。对应数值“7”。(自 1.1 新增)
//BMAP_STATUS_TIMEOUT 超时。对应数值“8”。(自 1.1 新增)
</script>
