Attendance punch card positioning solutions to problems ------ public network ip

Recently received a project, there is a requirement for attendance punch card, issues related to the location, not how to contact as a student in this area, most start thinking method is to use the browser to locate. Then the success or failure is determined in accordance with punch positioning the punch. Then there is the first attempt:

First, use the browser

After reviewing a lot of information, in accordance with the decision of this article do h5 mobile terminal or PC terminal with a high moral map to get the current position location , very grateful to the brother of the blog.

Specific steps are as follows:

1. Sign up maps high moral obtain key
   first register high moral map console , and then create my application, select the relevant configuration.
   
   
   Add key
   
   
   
2. Js introduced in the page

 <!-- 获取地理位置 -->
 <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.3&key=你的秘钥"></script>  

3. Add js

$(function() {
            var mapObj = new AMap.Map('iCenter');
            mapObj.plugin('AMap.Geolocation', function() {
                let geolocation = new AMap.Geolocation({
                    enableHighAccuracy: true, // 是否使用高精度定位，默认:true
                    timeout: 10000, // 超过10秒后停止定位，默认：无穷大
                    maximumAge: 0, // 定位结果缓存0毫秒，默认：0
                    convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
                    showButton: true, // 显示定位按钮，默认：true
                    buttonPosition: 'LB', // 定位按钮停靠位置，默认：'LB'，左下角
                    buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                    showMarker: true, // 定位成功后在定位到的位置显示点标记，默认：true
                    showCircle: true, // 定位成功后用圆圈表示定位精度范围，默认：true
                    panToLocation: true, // 定位成功后将定位到的位置作为地图中心点，默认：true
                    zoomToAccuracy: true // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                });
                mapObj.addControl(geolocation);
                geolocation.getCurrentPosition();
                AMap.event.addListener(geolocation, 'complete', onComplete); // 返回定位信息
                AMap.event.addListener(geolocation, 'error', onError); // 返回定位出错信息
            });

            function onComplete(obj) {
                var res = '经纬度：' + obj.position +
                    '\n精度范围：' + obj.accuracy +
                    '米\n定位结果的来源：' + obj.location_type +
                    '\n状态信息：' + obj.info +
                    '\n地址：' + obj.formattedAddress +
                    '\n地址信息：' + JSON.stringify(obj.addressComponent, null, 4);
                alert(res);
            }

            function onError(obj) {
                alert(obj.info + '--' + obj.message);
                console.log(obj);
            }

            console.log(mapObj);

        });

5. When the page is loaded in the running Access (using peanut shell network penetration)
   on the phone
   
   will be wrong on the phone, do not know why
   

Once you are able to get latitude and longitude, I consider specific location to get away by calling api. Upon inquiry latitude and longitude, I found the location can not be a little big, a few hundred meters of error. So I consider it another way, the principle: each network can access the device has a uniquely determined mac address. MAC address is used to uniquely identify a network card in the network, my idea is used js or write web is a way to get the mac address of wifi connection, time to time by the company wifi mac address mac address, hit card success . And then went to view a lot of information.

Second, get mac address Punch

Js query to get the mac address or by way of the west of the web, read the two articles of valuable articles

• JS obtain client IP address, MAC and seven methods hostname summary
• WIFI attendance punch card analysis
  js get mac address current mainstream browser is not supported. IE browser may acquire the mac address of the machine.
  So this method has reimbursed, I went to ask my brothers, brothers gave me a solution. Public IP method

Third, the use of public IP attendance

Each company has its own public network, each network has a common public network ip, when we use the formula router device is connected, then the public network ip our equipment will become the company's public network ip

According to this principle, query data, found this article JS obtain client IP and public IP address , this article provides three ways, first I just used.

1. Js introduced

//网页端引入脚本
<script type="text/javascript" src="http://pv.sohu.com/cityjson?ie=utf-8"></script>

2. Obtaining public network ip

//JS端直接获取
var ip = returnCitySN["cip"]

Thus it acquires the public network ip, is determined by determining whether the database which is the same public network ip successful punch.
This is the way I can think of to solve the attendance punch card positioning.
If you have a better way, please advice in the comments area.