功能步驟闡述：
1.后臺管理人員在后臺添加簽到地點
2.根據(jù)簽到地點生成現(xiàn)場簽到二維碼
3.在微信頁面上調(diào)用微信掃一掃功能羔挡，掃描簽到二維碼
4.百度定位纵顾，通過判斷用戶與簽到地點的距離伍茄，驗證簽到是否成功
步驟詳解：
1.在后臺添加簽到地點，因為涉及到第四步的距離換算施逾，所以添加簽到距離時敷矫，需要添加上地點的經(jīng)緯度例获，這里我用的是百度地圖提供的功能來獲取地點的經(jīng)緯度
<!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">確認(rèn)地址</button>
</div>
<script type="text/javascript">
// 百度地圖API功能，創(chuàng)建地圖實例
var map = new BMap.Map("allmap");
//初始化地圖,設(shè)置中心點坐標(biāo)和地圖級別曹仗，級別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();
//地圖標(biāo)點
map.addOverlay(new BMap.Marker(point));
} else {
alert("您選擇地址沒有解析到結(jié)果!");
}
});
var btn = document.getElementById("addr");
//通過點擊確認(rèn)按鈕獲取最后選擇的地址經(jīng)緯度
btn.addEventListener("click", function() {
alert('您選擇的位置為：' + point.lng + ',' + point.lat);
});
</script>
</body>
</html>
2.生成二維碼
我用的是phpqrcode.php
官網(wǎng)：http://phpqrcode.sourceforge.net/
下載地址：https://sourceforge.net/projects/phpqrcode/files/
這里貼出生成帶logo的二維碼代碼
<?php
include 'phpqrcode.php'; //請到官網(wǎng)下載
$value = ''; //二維碼內(nèi)容整葡，URL地址需要用微信網(wǎng)頁授權(quán)的地址件余，為后面獲取openid做準(zhǔn)備
$errorCorrectionLevel = 'L';//容錯級別 L M Q H
$matrixPointSize = 6;//生成圖片大小 1-10
//生成二維碼圖片
QRcode::png($value, './temp/qrcode.png', $errorCorrectionLevel, $matrixPointSize, 2);
$logo = './temp/logo.png';//準(zhǔn)備好的logo圖片
$QR = './temp/qrcode.png';//已經(jīng)生成的原始二維碼圖
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;
//重新組合圖片并調(diào)整大小
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.微信頁面調(diào)用微信掃一掃
詳情查看微信的官方文檔：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, //開啟時，會彈出調(diào)試信息遭居，正式上線時啼器，關(guān)閉就好了，默認(rèn)為關(guān)閉的
appId: '<?php echo $signPackage["appId"];?>',
timestamp: <?php echo $signPackage["timestamp"];?>,
nonceStr: '<?php echo $signPackage["nonceStr"];?>',
signature: '<?php echo $signPackage["signature"];?>',
jsApiList: [
// 所有要調(diào)用的 API 都要加到這個列表中
'scanQRCode'
]
});
wx.ready(function() {
// 在這里調(diào)用 API
wx.scanQRCode({
needResult: 0, // 默認(rèn)為0俱萍，掃描結(jié)果由微信處理端壳，1則直接返回掃描結(jié)果，
scanType: ["qrCode", "barCode"], // 可以指定掃二維碼還是一維碼枪蘑，默認(rèn)二者都有
success: function(res) {
var result = res.resultStr; // 當(dāng)needResult 為 1 時损谦，掃碼返回的結(jié)果
//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); //初始化地圖,設(shè)置城市和地圖級別岳颇。
var pointA = new BMap.Point(104.066867,30.555257);//云華路333號照捡，簽到地址
var openid = "{$openid}";//獲取openid,確定簽到的人
var geolocation = new BMap.Geolocation();
//瀏覽器定位，用手機(jī)查看網(wǎng)頁更準(zhǔn)確點→_→
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
})
//關(guān)于狀態(tài)碼
//BMAP_STATUS_SUCCESS 檢索成功话侧。對應(yīng)數(shù)值“0”栗精。
//BMAP_STATUS_CITY_LIST 城市列表。對應(yīng)數(shù)值“1”瞻鹏。
//BMAP_STATUS_UNKNOWN_LOCATION 位置結(jié)果未知悲立。對應(yīng)數(shù)值“2”。
//BMAP_STATUS_UNKNOWN_ROUTE 導(dǎo)航結(jié)果未知新博。對應(yīng)數(shù)值“3”薪夕。
//BMAP_STATUS_INVALID_KEY 非法密鑰。對應(yīng)數(shù)值“4”赫悄。
//BMAP_STATUS_INVALID_REQUEST 非法請求原献。對應(yīng)數(shù)值“5”。
//BMAP_STATUS_PERMISSION_DENIED 沒有權(quán)限埂淮。對應(yīng)數(shù)值“6”嚼贡。(自 1.1 新增)
//BMAP_STATUS_SERVICE_UNAVAILABLE 服務(wù)不可用。對應(yīng)數(shù)值“7”同诫。(自 1.1 新增)
//BMAP_STATUS_TIMEOUT 超時粤策。對應(yīng)數(shù)值“8”。(自 1.1 新增)
</script>
