H5利用js获取位置_js 获取h5地址-CSDN博客

本文链接：https://blog.csdn.net/weixin_43416532/article/details/113869774

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="allmap" style="height: 600px;width: 800px;"></div>
    <!-- 引入百度地图的ak -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ixYYicqb3EvQtEjfbGY4ObKxOoauFxnT"></script>
    <script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        // 百度地图API功能
        var map = new BMap.Map("allmap");
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(r) {
            alert(r.point)
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                //创建以XXX为中心的地图
                var mk = new BMap.Marker(r.point);
                map.addOverlay(mk); // 标出所在地
                map.panTo(r.point); // 地图中心移动
                var pointt = new BMap.Point(112.451532, 37.075754);
                map.centerAndZoom(pointt, 12);
                alert('您的位置：' + r.point.lng + ',' + r.point.lat);
                var point = new BMap.Point(r.point.lng, r.point.lat); // 用所定位的经纬度查找所在地省市街道等信息
                // alert(point);
                var coordinate = "113.451532, 38.075754"; //设置的签到点经纬度 
                // alert(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; //商业建筑
                    // 有的地方没有商业建筑所以是未定义
                    var v = province + city + district + street + streetNumber + business;
                    //alert(v);
                });
                circle = new BMap.Circle(pointA, 400, { //签到地点
                    fillColor: "blue", //圆形颜色
                    strokeWeight: 1,
                    fillOpacity: 0.2,
                    strokeOpacity: 0.2
                }); // 显示签到点的位置（半径为400米的一个圆）
                map.addOverlay(circle);
                var r = new BMap.Marker(pointA); //标出自己在的位置
                map.addOverlay(r);

                //----弹窗标注目的地的信息
                var sContent = "XX驾校<br>科目二训练场";
                var infoWindow = new BMap.InfoWindow(sContent);
                map.openInfoWindow(infoWindow, pointt);
                //---------------------------

                //计算当前位置与考勤点距离
                var distance = map.getDistance(pointA, point).toFixed(2);
                alert("您距离签到地点" + distance + "米！");
                if (distance <= 100) { //逻辑处理
                    //在范围内
                    alert("签到成功");
                } else { //逻辑处理
                    //不在范围内
                    alert("签到失败");
                }
            } else { //错误提示
                $("#errormsg").html("定位出错，请重新尝试");
                $("#errormsg").show();
                alert('failed' + this.getStatus());
            }
        }, {
            enableHighAccuracy: true
        })
    </script>

</body>

</html>

直接复制到编辑器里就🆗了！
可以把相关的数据传到后端中！
实际开发中

  function showPosition(position) {
            var latlon = position.coords.latitude + ',' + position.coords.longitude;
            var url = "https://api.map.baidu.com/geocoder/v2/?ak=hCBcm8H8opRLdC0f6OibbGavC0pne1uc&callback=renderReverse&location=" + latlon + "&output=json&pois=0";
            $.ajax({
                type: "GET",
                dataType: "jsonp",
                url: url,
                success: function (json) {
                    console.log(json);
                    var ggPoint = new BMap.Point(json.result.location.lng, json.result.location.lat); //创建标点
                    //坐标转换完之后的回调函数
                    translateCallback = function (data) {
                        if (data.status === 0) {
                            var marker = new BMap.Marker(data.points[0]);
                            maximumAge:10;
                            lon = data.points[0].lng;
                            lat = data.points[0].lat;
                            alert("定位成功!！【签到记得在右上角的框中写入名字，否则无法录入列表】\n您的经纬度：" + lat + ',' + lon);
                            $(".onee").click(function () {
                                var writeForm = $('.writeForm');
                                writeForm.attr('action', '${pageContext.request.contextPath}/user/saveyy?xian=1&jd=' + lon + '&wd=' + lat);
                                writeForm.submit();
                            });
                            $(".twoo").click(function () {
                                var writeForm = $('.writeForm');
                                writeForm.attr('action', '${pageContext.request.contextPath}/user/saveyy?xian=2&jd=' + lon + '&wd=' + lat);
                                writeForm.submit();
                            });
                            $(".threee").click(function () {
                                var writeForm = $('.writeForm');
                                writeForm.attr('action', '${pageContext.request.contextPath}/user/saveyy?xian=3&jd=' + lon + '&wd=' + lat);
                                writeForm.submit();
                            });
                            $(".fourr").click(function () {
                                var writeForm = $('.writeForm');
                                writeForm.attr('action', '${pageContext.request.contextPath}/user/saveyy?xian=4&jd=' + lon + '&wd=' + lat);
                                writeForm.submit();
                            });
                        }
                    }
                    var convertor = new BMap.Convertor(); //这个类就是转换的对象
                    var pointArr = [];
                    pointArr.push(ggPoint);
                    convertor.translate(pointArr, 1, 5, translateCallback) //通过调用回调函数来进行转换。
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(latlon + "地址位置获取失败");
                }
            });
        };