地图之定位打卡

Posted smile-inhibit

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了地图之定位打卡相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=kkkk"></script>
 
<title>百度地图的定位</title>
</head>
<body>
    <div id="allmap" style="width: 100%;height:500px;"></div>
 
 
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(121.47,31.23);
    map.centerAndZoom(point,12);
 
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r){console.log(r.point)
        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);
            var point = new BMap.Point(r.point.lng,r.point.lat);//用所定位的经纬度查找所在地省市街道等信息
            console.log(point);
            var coordinate = "121.584303,31.109865";//设置的签到点
            console.log(coordinate)
            var arr = coordinate.split(",");
            var lon = arr[0];      
            var lat = arr[1];
            var pointA = new BMap.Point(lon,lat); 
            var gc = new BMap.Geocoder();
            gc.getLocation(point, function(rs){
                var province = 0; //获取省份
                var city = 0; //获取城市
                var district = 0; //区
                var street = 0; //街
                var streetNumber = 0; //街
                var business = 0; //建筑
                var addComp = rs.addressComponents;
                province = addComp.province; //获取省份
                city = addComp.city; //获取城市
                district = addComp.district; //区
                street = addComp.street; //街
                streetNumber = addComp.streetNumber; //街
                business = addComp.business; //商业建筑
            });
            circle = new BMap.Circle(pointA, 300, {
                fillColor: "blue",
                strokeWeight: 1,
                fillOpacity: 0.2,
                strokeOpacity: 0.2
            });// 显示签到点的位置（半径为300米的一个圆）
            map.addOverlay(circle);

            //计算当前位置与考勤点距离
            var distance = map.getDistance(pointA,point).toFixed(2);
            console.log("距离为"+distance);
            if (distance <= 300) {
            //在范围内
            console.log("签到成功")
            } else {
            //不在范围内
            console.log("签到失败")
            }
        }else {
            $("#errormsg").html("定位出错，请重新尝试");
            $("#errormsg").show();
            alert(‘failed‘+this.getStatus());
        }        
    },{enableHighAccuracy: true})
</script>
 
 
</body>
</html>

技术分享图片

以上是关于地图之定位打卡的主要内容，如果未能解决你的问题，请参考以下文章

小程序之定位签到打卡=＞腾讯地图SDK

微信小程序怎么破定位

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

Vue+Antd搭配百度地图实现搜索定位等功能

Android 开发之集成百度地图的定位与地图展示

初学HBuilder之MUI框架---实现百度地图定位功能