開發全平臺移動打卡應用

移動打卡能夠很大程度上節省線下打卡的成本和工做量，因爲大中型企業內通常都有多個移動應用，因此方案是：開發一套基於html5的移動打卡應用，供各種應用平臺對接嵌入。先上最終效果圖。

  

 

 

 

 

打卡流程

1.獲取工做地的座標，若是工做地是工廠或園區，建議記錄多個

2.存儲工做地對應的經緯度（例如 HONGKONG114.111317,22.401287） 

3.設定員工打卡權限，員工對應的工做地

4.移動端獲取打卡人身份（認證），打卡人座標，獲取員工對應工做地座標，繪製地圖（基於高德JS API）

"{\"Data\":[{\"row_id\":1,\"GuidPoint\":\"af259164 - 100d - 404c - 9a23 - 030333e2f2b1\",\"Location\":\"香港\",\"Longitude\":114.111317,\"Latitude\":22.401287,\"Radius\":200.00}],\"Result\":\"true\"}"

Radius爲打卡半徑，建議200~400之間，太小員工很難打卡成功，過大員工在幾條街以外，甚至住在單位附近的在家就能打卡。高德地圖的JS API中提供2中判斷方式：

1.判斷兩個點距離point1.distance(point1)

2.判斷點是否在區域中maps.contains(point1)

本項目中咱們使用第二種方式

所有參考高德官方文檔 http://lbs.amap.com/api/javascript-api/example/amap-ui-markerlist/marker-with-circle

對接方式

目前對接了wx,dd,原生app這三種

區別主要在於獲取經緯度的寫法，原生app引入插件cordova plugin add cordova-plugin-geolocation

//經過微信、釘釘、gps定位
    function gps() {
        //wx = "undefined";

        if (typeof wx != "undefined") {
            //微信獲取定位
            try {
                wx.ready(function () {
                    wx.getLocation({
                        type: 'gcj02',
                        success: function (res) {
                            //  res.longitude ; 經度，浮點數，範圍爲180 ~ -180。
                            //  res.latitude;  緯度，浮點數，範圍爲90 ~ -90
                            convert2amap(res.longitude, res.latitude, "amam");
                        },
                        fail: function () {
                            getGPS();
                        }
                    });
                });
            } catch (e) {
                getGPS();
            }
        } else if (typeof dd != "undefined") {
            //釘釘獲取定位
            try {
                dd.error(function (error) {
                    getGPS(callback);
                });
                dd.ready(function () {
                    dd.device.geolocation.get({
                        onSuccess: function (result) {
                            if (result.location) {
                                longitude = result.location.longitude;
                                latitude = result.location.latitude;
                            } else {
                                longitude = result.longitude;
                                latitude = result.latitude;
                            }

                            //gps座標,
                            /*android2.1及以前版本返回的數據會多嵌套一層location,2.2版本會改爲和ios一致，請注意，建議對返回的數據先判斷存在location，作向後兼容處理  */
                            /* 目前androidJSAPI返回的座標是高德座標，ios是標準座標，若是服務端調用的是高德API，則須要多ios返回的經緯度作下處理，詳細請見http://lbsbbs.amap.com/forum.php?mod=viewthread&tid=724&page=2 */
                            /* 座標轉換API http://lbs.amap.com/api/javascript-api/example/p/1602-2/ */
                            /*
                            */
                            var u = navigator.userAgent;
                            var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android終端或者uc瀏覽器
                            var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
                            if (isAndroid) {
                                convert2amap(longitude, latitude, "amap");
                            } else if (isiOS) {
                                convert2amap(longitude, latitude, "");
                            }
                        },
                        onFail: function (err) {
                            getGPS();
                        }
                    });
                });
            } catch (e) {
                getGPS();
            }
        } else {

            getGPS();
        }
    }

//經過瀏覽器獲取定位
function getGPS() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
//經度
longitude = position.coords.longitude;
//緯度
latitude = position.coords.latitude;
convert2amap(longitude, latitude, "");
//gps座標,
}, onError);

} else { $("#LoadingToast").css("display", "none"); alert("提示：您的客戶端不支持獲取定位信息，請升級或聯繫管理員！"); } }