一，需求分析
從思路分析，給定一個固定的打卡地點，綁定一個事件，觸發打卡。
首先，你需要查閱地圖，對經緯度有一定的了解，才友善以下操作。
- 擷取你自身的位置，擷取固定打卡地點。地理圍欄簡單的了解就是判斷點是否在圓圈内。
- 如何知道自身以及打卡地點的準确位置（誤差不是很大），
- 對比自身位置到打卡地點的距離，進行判斷。
二，了解額外的知識
比如上面描述的經緯度概念，其次，說起定位，肯定第一時間去找百度地圖，高德地圖，騰訊地圖等等。
百度地圖和高德地圖都有各自的API，相信大家可以好好看看，我在這裡隻是簡單地應用，舉例為百度地圖。
H5有查詢地理位置的API，可以擷取到自身的經緯度。我們在百度地圖上可以找到自己的位置，但是H5擷取的經緯度放在百度地圖上 坐标反查 卻有很大的 誤差，因為什麼呢。
因為坐标系不一樣，我們自己擷取的坐标系是 火星坐标系 ！ 百度坐标系上面是 把火星坐标系 經過一套算法（不知）加密而得到的 坐标系 ，那麼我們應該怎麼做呢。百度地圖 有自己的 API ，坐标轉換， 可以把其他的坐标系轉化為 百度坐标。 把轉化的坐标在坐标反查中的定位就很準确了，定位的誤差也會很大的減少。
三，代碼實作
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你申請的密鑰"></script>
<body>
<p id="demo">點選按鈕擷取您目前坐标（可能需要比較長的時間擷取）：</p>
<button onclick="getLocation()">點選打卡</button>
</body>
<script type="text/javascript">
//擷取到自身經緯度
var x = document.getElementById("demo");
function getLocation() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "該浏覽器不支援擷取地理位置。";
}
}
function showPosition(position) {
// x.innerHTML = "緯度: " + position.coords.latitude +
// "<br>經度: " + position.coords.longitude;
$.get({
url: 'http://api.map.baidu.com/geoconv/v1/?coords=' + position.coords.longitude + ',' + position.coords.latitude + '&from=1&to=5&ak=你申請的密鑰',
type: 'get',
dataType: 'jsonp',
jsonp: 'callback',
jsonpCallback: 'callback',
contentType: 'application/json;charset=utf-8',
success: function(result) {
//得到的百度地圖
// alert(result.result[0].x + ',' + result.result[0].y)
var bd_lng = result.result[0].x;//獲得自身所處位置的經度
var bd_lat = result.result[0].y;//獲得自身所處位置的緯度
alert(bd_lng+','+bd_lat)
},
error: function(err) {
// console.log(err)
}
})
}
</script>
得到了 自己 在百度地圖上的經緯度，再進行下一步
四，計算距離
借助百度地圖API，提供了計算兩個地點，經緯度距離的計算公式，帶入就得到 距離，誤差是有的，不會太大，親測。
![怎樣使用SpringMVC控制頁面[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)