H5+百度地图实现移动端考勤定位打卡

项目地址:https://github.com/fancaixia/attendanceSignIn.git

H5+百度地图实现考勤定位打卡

html页面引入百度地图 (记得更改密钥)

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=您的密钥&s=1"></script>

确保线上服务为https协议

案例代码

const {BMap,BMAP_STATUS_SUCCESS,BMAP_ANCHOR_TOP_LEFT}=window;
            // 定位
            const _$that = this;
            const map = this.map;

                        // 第一次绘制
                        // 创建新的标注开始
                        var pt2 = new BMap.Point(r.point.lng , r.point.lat );

                        var myIcon2 = new BMap.Icon(MyposImg, new BMap.Size(42,53));
                        var marker2 = new BMap.Marker(pt2,{icon:myIcon2});  // 创建标注
                        marker2.setTop(true,27000000);
                        map.addOverlay(marker2);

                        var points = [{"lng":actAttendanceInfo.jd,"lat":actAttendanceInfo.wd,"status":1,"id":50},  
                        {"lng":r.point.lng,"lat":r.point.lat,"status":1,"id":5}  
                        ];   
                        var view = map.getViewport(eval(points));  
                        var mapZoom = view.zoom;   
                        var centerPoint = view.center;   
                        map.centerAndZoom(centerPoint,mapZoom);  

                        // 使用经纬度换取 位置信息
                        var geoc = new BMap.Geocoder();   
                        geoc.getLocation(pt2, function(posrs){
                            _$that.setState({
                                myaddress: posrs.address,
                                mypoint:r.point,

            
                            },()=>{
                                // 计算是否在考勤范围内
                                var pointB = new BMap.Point(actAttendanceInfo.jd,actAttendanceInfo.wd);     // 活动地点位置
                                let curDistance = (map.getDistance(pt2,pointB)).toFixed(2);
                                // console.log('距离是：',curDistance,);  //获取两点距离,保留小数点后两位
                                if(Number(curDistance) <= Number(actAttendanceInfo.range)){
                                    // console.log('在考勤范围内')
                                    _$that.setState({
                                        inrange:true,
                                    })
                                }else{
                                    // console.log('不在考勤范围内')
                                    _$that.setState({
                                        inrange:false,
                                    })
                                }
                                // 开启定时器  10s 获取一次位置
                            })
                        });  
                        // 创建新的标注结束

                }
            },{provider:'baidu'})