当前位置：首页 > 技术博客 > JavaScript > 前端用法：JavaScript 获取当前GPS地理位置的方法，保姆级代码！

前端用法：JavaScript 获取当前GPS地理位置的方法，保姆级代码！

4年前 (2021-09-26)JavaScript932

在网上搜到很多，99%不能用，自己动手将整理记录一下吧，以便后续再使用！

<head>
    <title>JavaScript获取当前地理位置的方法</title> 
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    
    <!--引用百度地图API文件， 您的秘钥的获取方式是注册为百度地图的开发者，创建应用-->
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=B6E6tPUN3GyxnumMAzuf2LGiBxwIhjVa"></script>
    <!--v3.0版本的引用方式：src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"--></head>
 <body> 
 <script type="text/javascript">
 
    // 创建一个函数，主要功能是在调用html5的geolocation()前，先判断当前浏览器是否支持html5，（PC绝大部分浏览器不支持或者拒绝html5定位）
    function getLocation() {
        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;
         alert('您的当前地址的经纬度：经度' + longitude + '，纬度' + latitude);
        // 根据经纬度获取地理位置，不太准确，获取城市区域还是可以的
        var map = new BMap.Map("allmap");
        var point = new BMap.Point(longitude, latitude);
        var gc = new BMap.Geocoder();
        gc.getLocation(point, function (rs) {
            var addComp = rs.addressComponents;
            alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
        });
        // 这里后面可以写你的后续操作了
        handleData(longitude, latitude);
    }
 
    // 失败时的回调函数
    // 这里是错误提示信息
    function onError(error) {
        switch (error.code) {
            case 1:
                alert("位置服务被拒绝！");
                break;
            case 2:
                alert("暂时获取不到位置信息！");
                break;
            case 3:
                alert("获取信息超时！");
                break;
            case 4:
                alert("未知错误！");
                break;
        }
       
    }
 
 
    // 页面载入时请求获取当前地理位置
    window.onload = function () {
        // html5获取地理位置
        getLocation();
    };</script></body>

查看效果的话需要将代码放到服务端用443端口（就是需要支持https），本地运行会报错！

提醒：

1、上面这个方法最适合在移动端使用

2、如果用户没有给浏览器定位权限不能用

注：PC很多浏览器对于html5的定位技术是不太友好的，很多浏览器都是默认拒绝定位，一般只有IE是可以正常使用，但是获取到的经纬度偏差很大；相反在手机访问的时候，由于一般手机上都有GPS模块，所以定位效果会好很多，原因就在于手机上的GPS模块对geolocation特性的支持是很好的。结论是，html5的定位在手机上测试是最佳的选择，PC建议使用IE浏览器。

写在最后：

如果只需要经纬度而不需要真实的物理地址就不需要百度的API了，上面的百度的API就是为了实现经纬度转真实地址！或者你有其他更好的办法也可以用自己的方法转换

我临时弄了一个演示站：https://www.liuzhixi.cn/gps.html （需要给浏览器开放定位权限）