js获取用户地理位置 - 流情的博客

正常情况下，一般都是通过请求时附带的ip给后端，然后再通过ip解析出客户端访问所在的地理位置，那么，如果不通过ip呢。让用户手动授权允许访问客户端的位置，以此获取地址位置精度更高。

address.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>JS获取当前地理位置的方法</title>
</head>
 
<body>
    <button onclick="getLocation()">获取经纬度</button>
    <p id="ttt"></p>
    <p id="address"></p>
</body>
 
<!--引用百度地图API文件， 您的秘钥的获取方式是注册为百度地图的开发者，创建应用-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的百度ak"></script>
<script type="text/javascript">
 
   getLocation();
    // 在调用html5的geolocation()前，先判断当前浏览器是否支持html5，（PC绝大部分浏览器不支持或者拒绝html5定位）
    function getLocation() {
        console.log(123)
        var options = {
            enableHighAccuracy: true,
            maximumAge: 1000
        };
        if (navigator.geolocation) {
            // 浏览器支持geolocation，参数里有两个回调函数，成功和失败的回调，另外一个参数没有研究过
            navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
        } else {
            // 否则浏览器不支持geolocation
            alert('您的浏览器不支持地理位置定位！');
        }
    }
 
    // 成功时的回调函数
    // 第一步获取定位成功返回的经纬度数据，然后结合百度那边提供的接口进行具体位置的转换
    function onSuccess(position) {
        // 返回用户位置
        // 经度
        var longitude = position.coords.longitude;
        // 纬度
        var latitude = position.coords.latitude;
        var tttP = document.getElementById("ttt");
        tttP.innerHTML = "纬度：" + latitude + "，经度：" + longitude;
        // 根据经纬度获取地理位置，不太准确，获取城市区域还是可以的
        var map = new BMap.Map("allmap");
        var point = new BMap.Point(longitude, latitude);
        var gc = new BMap.Geocoder();
        gc.getLocation(point, function (rs) {
            console.log("地理位置：",rs);
            var addComp = rs.addressComponents;
            var address = document.getElementById("address");
            var str = "纬度：" + latitude + "，经度：" + longitude + "，地址："+addComp.province + 
            ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber;
            address.innerHTML = addComp.province + ", " + addComp.city + ", " + addComp.district + 
            ", " + addComp.street + ", " + addComp.streetNumber;
            fetch('https://www.yzzone.com/api/test')
            .then(response => response.text())
            .then(data => {
                console.log(data);
            })
            .catch(error => {
                console.error('Error:', error);
            });
        });
    }
 
    // 失败时的回调函数
    // 这里是错误提示信息
    function onError(error) {
        console.log("Error：",error)
        switch (error.code) {
            case 1:
                alert("位置服务被拒绝！");
                break;
            case 2:
                alert("暂时获取不到位置信息！");
                break;
            case 3:
                alert("获取信息超时！");
                break;
            case 4:
                alert("未知错误！");
                break;
        }
    }
</script>
</html>

用到的是浏览器的navigator.geolocation.getCurrentPosition方法。允许授权后获取到的是经纬度。因此还需要通过百度api转为具体的位置才行（为啥不通过请求ip去解析出地理位置呢，感觉好奇葩的需求，用户体验也不好）考虑到某些业务可能用得上，记录下。