前言：
由於項目需求需要在項目中實現手機端（基於網頁）考勤打卡功能，最初考慮使用H5自身定位功能，但嘗試過後，效果很不穩定。然後嘗試使用百度地圖JsAPI，百度家的穩定倒是很穩定，沒想到的是定位位置和實際位置居然相差幾十公里，一開始是以爲自己配置有問題，浪費了我大半天時間去找原因，最後發現他本身提供的API就是偏差很大距離的，他自己家的倒是定位很準，對外開放的API簡直慘不忍睹。
然後換用高德去測試，高德開放的API精確度和百度地圖是一樣的，小夥伴可以親自去體驗下，難怪百度如今淪落到這樣。。。
所以就決定使用高德API來進行定位了；
主要思路：利用高德API獲取當前位置經緯度、設置考勤點經緯度、計算兩點距離判斷是否在考勤範圍內。
高德JS API提供的瀏覽器定位接口，融合了HTML5 Geolocation定位接口、精確IP定位服務，以及安卓定位sdk定位。所以在定位上大大提高了精準度以及成功率。
效果如下：
正文：
首先註冊賬號並申請Key
1. 首先，註冊開發者賬號，成爲高德開放平臺開發者
2. 登陸之後，在進入「應用管理」 頁面「創建新應用」
3. 爲應用添加 Key，「服務平臺」一項請選擇「 Web 端 ( JSAPI ) 」
準備頁面
1. 在頁面添加 JS API 的入口腳本標籤，並將其中「您申請的key值」替換爲您剛剛申請的 key；
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申請的key值"></script>
2. 添加div標籤作爲地圖容器，同時爲該div指定id屬性；
<div id="container"></div>
3. 爲地圖容器指定高度、寬度；
#container {width:300px; height: 180px; }
4. 進行移動端開發時，請在head內添加viewport設置，以達到最佳的繪製性能；
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
5. 在完成如上準備工作之後便可以開始進行開發工作了。
顯示定位地圖以及獲取當前經緯度地址
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>瀏覽器精確定位</title>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<style>
html,body,#container{
height:100%;
}
.info{
width:26rem;
}
</style>
<body>
<div id='container'></div>
<div class="info">
<h4 id='status'></h4><hr>
<p id='result'></p><hr>
<p >由於衆多瀏覽器已不再支持非安全域的定位請求，爲保位成功率和精度，請升級您的站點到HTTPS。</p>
</div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申請的key值"></script>
<script type="text/javascript">
var map = new AMap.Map('container', {
resizeEnable: true
});
AMap.plugin('AMap.Geolocation', function() {
var geolocation = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位，默認:true
timeout: 10000, //超過10秒後停止定位，默認：5s
buttonPosition:'RB', //定位按鈕的停靠位置
buttonOffset: new AMap.Pixel(10, 20),//定位按鈕與設置的停靠位置的偏移量，默認：Pixel(10, 20)
zoomToAccuracy: true, //定位成功後是否自動調整地圖視野到定位點
});
map.addControl(geolocation);
geolocation.getCurrentPosition(function(status,result){
if(status=='complete'){
onComplete(result)
}else{
onError(result)
}
});
});
//解析定位結果
function onComplete(data) {
document.getElementById('status').innerHTML='定位成功'
var str = [];
str.push('定位結果：' + data.position);
str.push('定位類別：' + data.location_type);
if(data.accuracy){
str.push('精度：' + data.accuracy + ' 米');
}//如爲IP精確定位結果則沒有精度信息
str.push('是否經過偏移：' + (data.isConverted ? '是' : '否'));
document.getElementById('result').innerHTML = str.join('<br>');
}
//解析定位錯誤信息
function onError(data) {
document.getElementById('status').innerHTML='定位失敗'
document.getElementById('result').innerHTML = '失敗原因排查信息:'+data.message;
}
</script>
</body>
</html>
計算當前位置與考勤點距離
var signzone = [121.52625, 31.66925];//設置的簽到點
console.log(signzone);
//計算當前位置與考勤點距離
var distance = AMap.GeometryUtil.distance(getposition,signzone).toFixed(2);
//document.getElementById('distance').innerHTML = distancestr;
console.log(distance);
if (distance <= 1000) {
//在範圍內
//數據操作
} else {
//不在範圍內
//數據操作
}
繪製簽到點範圍
//繪製簽到範圍
var circle = new AMap.Circle({
center: signzone,
radius: 100, //簽到範圍半徑
borderWeight: 1,
strokeOpacity: 1,
strokeOpacity: 0.2,
fillOpacity: 0.4,
})
circle.setMap(map)
// 縮放地圖到合適的視野級別
map.setFitView([ circle ])
var circleEditor = new AMap.CircleEditor(map, circle)
到這裏定位打卡的基本功能就完成了，然後再加上一些判斷，比如用戶是否進入考勤範圍這些等等，配合上後端數據操作就可以實現該需求了。
最終頁面效果如下：
效果演示地址：https://www.eiun.net/tools/map/index.html
一些注意事項
定位一般分爲兩種場景：移動端和PC，下面分別講下這兩個場景在使用定位過程中的一些注意事項。
移動端
移動端包括手機，pad和其它帶有GPS定位芯片的智能設備（如手錶、音箱等），移動端的系統包括iOS和Android。成功完成定位需要達成以下前提條件：
-
系統GPS打開
-
所使用的App或瀏覽器已獲取定位權限
-
對打開的頁面允許使用定位
-
對於iOS10以上系統和Android的一些版本已禁止在非HTTPS協議的域名下定位，請儘快將站點升級到HTTPS
注意，以上只是定位成功的前提條件，滿足這些並不一定等於可以成功定位，定位還與當前位置（室內會影響GPS信息）、手機信號和定位權限等因素影響。如果您在使用過程中定位失敗，可以參考FAQ：Geolocation的定位流程以及定位失敗的原因 ，將失敗信息通過工單發送給我們，高德的工程師將協助您解決問題。
PC
因爲pc設備上大都缺少GPS芯片，所以在PC上的定位主要通過IP精準定位服務，該服務的失敗率在5%左右。
定位失敗
如果定位失敗或者遇到其它問題，請參考FAQ：Geolocation的定位流程以及定位失敗的原因
附上源代碼：
Github地址：https://github.com/iGaoWei/Amap-location
第一次寫GitHub，喜歡的小夥伴點個Star哦，本資料僅供參考，水平有限，難免存在紕漏錯誤之處，歡迎評論指正。