码迷,mamicode.com
首页 > 其他好文 > 详细

地图之定位打卡

时间:2018-08-14 14:41:34      阅读:716      评论:0      收藏:0      [点我收藏+]

标签:cti   viewport   java   经纬度   enable   bubuko   ror   城市   doc   

<!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>

技术分享图片

地图之定位打卡

标签:cti   viewport   java   经纬度   enable   bubuko   ror   城市   doc   

原文地址:https://www.cnblogs.com/smile-inhibit/p/9473877.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!