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>