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

Posted 2021-08-25 筱枫枫

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

百度的地图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" ></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>



效果图如下：