小程序电子围栏系统

需求：通过小程序，距离公司指定范围内可进行事件的预约排号，超出范围不可操作同时提示超出距离值。

以下是获取授权定位自己位置及转化为文字地址，以及与定义好的公司坐标值距离差值。

 // 请求获取定位授权
    getUserAuth: function () {
        return new Promise((resolve, reject) => {
            wx.authorize({
                scope: 'scope.userLocation'
            }).then(() => {
                resolve()
            }).catch(() => {
                let that = this;
                wx.getSetting({
                    success: (res) => {
                        if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
                            wx.showModal({
                                title: '请求授权当前位置',
                                content: '需要获取您的地理位置，请确认授权',
                                success: function (res) {
                                    if (res.cancel) {
                                        wx.showToast({
                                            title: '拒绝授权',
                                            icon: 'none',
                                            duration: 1000
                                        })
                                    } else if (res.confirm) {
                                        wx.openSetting({
                                            success: function (dataAu) {
                                                if (dataAu.authSetting["scope.userLocation"] == true) {
                                                    //再次授权，调用wx.getLocation的API
                                                    that.getLocation();
                                                } else {
                                                    wx.showToast({
                                                        title: '授权失败',
                                                        icon: 'none',
                                                        duration: 1000
                                                    })
                                                }
                                            }
                                        })
                                    }
                                }
                            })
                        } else if (res.authSetting['scope.userLocation'] == undefined) {
                            that.getLocation();
                        } else {
                            that.getLocation();
                        }
                    }
                })
            })
        })
    },

    getLocation: function (e) {
        console.log('刷新位置');
        var that = this
        // 实例化腾讯地图API核心类
        const QQMapWX = new qqMapSdk({
            key: '888888888888' //腾讯地图下申请的API值
        });
        //获取当前位置
        wx.getLocation({
            type: 'gcj02',
            success: function (res) {
                var points = [{
                        latitude: res.latitude,
                        longitude: res.longitude,
                    },
                    {
                        latitude: that.data.companyaddress1,
                        longitude: that.data.companyaddress2,
                    }
                ]
                QQMapWX.reverseGeocoder({
                    location: {
                        latitude: res.latitude,
                        longitude: res.longitude
                    },
                    success: function (res) {
                        if (e != "no") {
                            wx.showToast({
                                title: '位置更新成功',
                                icon: 'success',
                                duration: 1000
                            })
                        }
                        that.setData({
                            points: points,
                            circles: [{
                                latitude: that.data.companyaddress1,
                                longitude: that.data.companyaddress2,
                                color: '#ff4163',
                                fillColor: '#7cb5ec88',
                                radius: Number(that.data.companydistance),
                                strokeWidth: 2
                            }],
                            address: res.result.address + res.result.formatted_addresses.recommend,
                            latlng: [res.result.location.lat, res.result.location.lng]
                        })
                        //处理打卡记录及判断打卡位置是否办公地点打卡
                        var distance = that.getDistance(that.data.latlng[0], that.data.latlng[1], that.data.companyaddress1, that.data.companyaddress2);
                        if (distance > that.data.companydistance) {
                            that.setData({
                                orderdistance: distance, //用于页面层
                                orderstatus: false,
                            })
                        } else {
                            that.setData({
                                orderdistance: distance,
                                orderstatus: true,
                            })
                        }
                    },
                    fail: function (res) {
                        this.getUserAuth()
                        wx.showToast({
                            title: '请打开定位重进',
                            icon: 'error',
                            duration: 2000
                        });
                    }
                })
            },
        })
    },
    //经纬度距离计算
    getDistance: function (lat1, lng1, lat2, lng2, unit = false) {
        var radLat1 = lat1 * Math.PI / 180.0
        var radLat2 = lat2 * Math.PI / 180.0
        var a = radLat1 - radLat2
        var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0
        var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
            Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)))
        s = s * 6378.137 // EARTH_RADIUS;
        s = Math.round(s * 10000) / 10000 //输出为公里
        if (0) { //是否返回带单位
            if (s < 1) { //如果距离小于1km返回m
                s = s.toFixed(3)
                s = s * 1000 + "m"
            } else {
                s = s.toFixed(2)
                s = s + "km"
            }
        } else {
            s = s.toFixed(3)
            s = s * 1000
        }
        return s;
    },

以下是通过接口获取配置文件中提前定义好的公司坐标值。

//获取配置信息
    getConfig() {
        var that = this;
        wx.request({
            url: 'https://www.nmbn.net/vip/config.php', // 接口地址
            method: 'GET',
            header: {
                'content-type': 'application/json'
            },
            success: function (res) {
                that.setData({
                    markers: [{
                        id: 0,
                        iconPath: baseUrl + '/images/company_position.png',
                        latitude: res.data.companyaddress1,
                        longitude: res.data.companyaddress2,
                        width: 40,
                        height: 40,
                        label: { //标记的提示文字的样式
                            width: 80,
                            height: 25,
                            borderRadius: 5,
                            content: '石丰定位点', //提示内容
                            color: '#333',
                            bgColor: '#fff',
                            padding: 3,
                            left: 40
                        }
                    }, ],
                    companyaddress1: res.data.companyaddress1,
                    companyaddress2: res.data.companyaddress2,
                    companydistance: res.data.companydistance,
                    waittime: res.data.waittime
                });
            },
            fail: function (err) {
                wx.showToast({
                    title: "网络错误",
                    icon: 'error',
                    duration: 2000
                })
            }
        })
    },