vue基于百度地图api开发签到打卡功能

最近公司移动端项目需要开发的定位签到功能，百度了很多材料这里做下经验分享

百度的地图api官网：https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/geoloaction

vue的百度地图插件vue-baidu-map，官网：https://dafrok.github.io/vue-baidu-map/#/zh/start/base

访问协议的必须为https，我吃了很多这方面的亏。

下面直接上代码

<template>
    <div class="classpadding">
        <van-row>
            <van-col class="sinbox">
                <p>当前正在办理：<span>{{sinnumber}}号</span></p>
                <p>请尽快签到，如不签到，则错过排号</p>
            </van-col>
        </van-row>
        <van-row class="mapbox">
            <baidu-map class="bm-view" :zoom="zoom" :center="center" @ready="handler" ak="自己申请的key">
            </baidu-map>
            <div class="siginBox">
                <div class="PositioningBack">
                    <div @click="clickGcFn" :class="isSignFlag?'':'isSignFlag'">
                        <p style="font-size:0.42rem;margin-top:0.7rem;">{{nowTime}}</p>
                        <p style="font-size:0.26rem;">签到取号</p>
                    </div>
                </div>
            </div>
            <div class="Positioningtips"><p class="isshow_Singn" v-if="isSignFlag"><i></i>已进入签到范围</p><p class="notshow_Singn" v-else style="color:#E85656"><i></i>不在签到范围内</p></div>
        </van-row>
        <van-dialog v-model="isshow_Singn_diglog" confirmButtonText="我知道了" confirmButtonColor="#5F6FAB" @confirm="confirm">
            <van-row>
                <van-col class="positioncls_img" span="24" offset="10"><img src="../../assets/img/icon_checkinsucceeded.png" alt=""></van-col>
                <van-col  span="24" class="position_text" offset="8">{{sigNinTime}}<p>签到成功</p></van-col>
            </van-row>
        </van-dialog>
    </div>
</template>
<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
export default {
    name:'SignIn',
    data() {
        return {
            sinnumber:'432',
            center: { lng:0, lat:0 },
            zoom:3,//必须写上,自己因为忘记写一直无法自动定位
            datetime:null,
            nowTime:'',
            gc:{}, //地理解析
            pt:'', // 我的签到位置
            isSignFlag:true,
            longitude:'', //经纬度
            Range:0, //签到范围
            isshow_Singn_diglog:false,
            sigNinTime:'',
        }
    },
    components:{
     BaiduMap,
    },
    created(){
        this.longitude=this.$route.query.longitude
        this.Range=this.$route.query.Range
        window.onresize = () => {
        return (() => {
          this.setRem(document)
        })();
      }
      this.$nextTick(()=>{
        this.setRem(document);
        // this.createQrcode()
      })
    },mounted(){
        this.datetime = setInterval(() => {
            this.setNowTimes();
        }, 1000);
    },
    methods:{
        handler({ BMap, map }) {
            let that=this
            var point = new BMap.Point(116.331398,39.897445);//创建定坐标
            map.centerAndZoom(point,15);//// 初始化地图,设置中心点坐标和地图级别
            var geolocation = new BMap.Geolocation();
            this.gc = new BMap.Geocoder();//创建地理编码器、
            var pointAttendance
            // 开启SDK辅助定位
            geolocation.enableSDKLocation();
            geolocation.getCurrentPosition(function(r){
                if(r.accuracy==null){
                   that.$dialog.alert({message:"请您打开浏览器定位权限"}).then(resd=>{
                        that.$router.push("/HistoryAppointment")
                    })
                }
                if(this.getStatus() == BMAP_STATUS_SUCCESS){
                    var mk = new BMap.Marker(r.point);
                    map.addOverlay(mk);
                    map.panTo(r.point);
                    // alert('您的位置：' + r.point.lng + ',' + r.point.lat);
                    point = new BMap.Point(r.point.lng, r.point.lat); // 获取自己的签到位置
                    that.pt = r.point;   
                    map.panTo(that.pt);//移动地图中心点
                    var coordinate =that.longitude;// 设置考勤点经纬度  "116.321854,39.893237" 
                    var arr = coordinate.split(",");// 切割经纬度
                    var lon = arr[0];
                    var lat = arr[1];
                    pointAttendance = new BMap.Point(lon, lat);
                    var circle = new BMap.Circle(pointAttendance, that.Range, { // 考勤地点范围
                        fillColor: "blue", // 圆形颜色
                        strokeWeight: 1,
                        fillOpacity: 0.2,
                        strokeOpacity: 0.2
                    });
                    map.addOverlay(circle);
                    // 考勤的经纬度获取
                    var r = new BMap.Marker(pointAttendance);
                    map.addOverlay(r); // 标出考勤点的位置
                    // 计算签到与当前位置之间的差值
                    var distance = map.getDistance(point, pointAttendance).toFixed(2);
                    if(distance>that.Range){
                        that.isSignFlag=false   
                    }
                }
                else {
                    alert('failed'+this.getStatus());
                }        
            },{enableHighAccuracy: true});
        },
        // 时间定时器
         setNowTimes() {
            //  根据插件获取时分秒
           this.nowTime = this.$moment().format("HH:mm:ss")
        },
        clickGcFn(){
            if(this.isSignFlag){
                this.sigNinTime=this.nowTime
                this.isshow_Singn_diglog=true
                this.gc.getLocation(this.pt, function(rs){
                    var addComp = rs.addressComponents;
                    // alert(addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber);
                });  
            }else{
                this.$dialog.alert({message:"您当前位置不在签到范围"})
            }
        },
        confirm(){
            let mydate=this.$moment().format('YYYY-MM-DD')
            this.$http.post("/appoint/updaeSignTimeByOrderId",{
                orderId:this.$route.query.orderId,
                signTime:mydate+' '+this.sigNinTime
            }).then(res=>{
                // if(res.da){}
                console.log(res)
                if(res.data.code==200){
                    // 签到完成跳转到等待叫号页面
                    this.$router.push({
                        path:'/Call',
                        query:{
                            nowTime:this.sigNinTime,
                            place:this.$route.query.place
                        }
                    })
                }else{
                    this.$dialog.alert({message:res.data.msg})
                }
            })
        }
    },
    // 销毁页面之后清空定时器
    beforeDestroy(){
        if(this.datetime){
            clearInterval(this.datetime)
        }
    }
}
</script>
<style lang="less" scoped>
    .sinbox{
        font-size: 0.29rem;
        color: #333333;
        font-weight: 800;
        text-align: center;
        width: 100%;
        margin-top: 2rem;
    }
    .sinbox p{
        margin: 0.1rem 0rem;
    }
    .sinbox span{
        color: #5F6FAB;
    }
    .sinbox p:last-child{
        color: #E5B03C;
        font-weight: 400;
    }
    // map 地图样式
        .bm-view{
            width: 100%;
            height:8rem;
        }
        .mapbox{
            width:100%;
            height: 10rem;
        }
        .siginBox{
            display:flex;
            align-items:center;
            justify-content: center;
            margin-top: 3rem;
        }
        .PositioningBack p{
            color: #ffffff;
            font-weight: bold;
            text-align: center;
            line-height: 0.5rem;
        }
        .PositioningBack{
            width: 2.78rem;
            height: 2.78rem;
            border: 1px solid #5683E8;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .PositioningBack div{
            width: 2.29rem;
            height: 2.29rem;
            background: linear-gradient(0deg, #5683E8, #56B6E8);
            box-shadow: 0px 11px 21px 0px rgba(86, 133, 232, 0.39);
            border-radius: 50%;
        }
        .Positioningtips i{
            background: url('../../assets/img/checkinscope_yes.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            width: 0.24rem;
            height: 0.24rem;
            display: block;
            float: left;
            margin-left:2.2rem;
            margin-right: 0.1rem;
            margin-top: 0.1rem;
        }
        .Positioningtips{
            margin-top: 0.2rem;
        }
        .Positioningtips p{
            font-size: 0.26rem;
            color: #999999;
        }


    .notshow_Singn i{
        background: url('../../assets/img/checkinscope_no.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .isSignFlag{
        background:#9f9f9f !important;
    }
    .positioncls_img{
        width: 1.32rem;
        height: 1.36rem;
       margin-top: 0.3rem;
       margin-bottom: 0.2rem;
    }   
    .positioncls_img img{
        width: 100%;
        height: 100%;
    }
    .position_text{
        color: #333333;
        font-size: 0.56rem;
        font-weight: bold;
    }
    .position_text p{
        margin: 0.1rem 0 0.9rem 0.5rem;
        font-size: 0.29rem;
        font-weight: 400;
    }
</style>

效果图如下：