首页技术文章正文

Geolocation API如何获取用户当前位置

更新时间:2022年03月31日15时34分来源:传智教育浏览次数:

GeolocationAPI的使用非常简单，“navigator.geolocation”对象提供了可以公开访问地理位置的方法，其中navigator为浏览器内置对象。检测浏览器是否支持定位API，只需要检测geolocation是否存在于navigator中即可。对于移动Web开发者，大多数情况只需要获取用户的当前位置，此时我们可以使用getCurrentPosition()方法来获取当前位置的坐标值。getCurrentPosition()被调用时会发起一个异步请求，浏览器会调用系统底层的硬件(如GPS)来更新当前的位置信息，当信息获取到之后会在回调函数中传入position对象。

position对象包含两个属性，一个是coords(坐标)，它是一个Coordiante对象，包含当前位置信息;另一个是timestamp，表示获取到位置的时间戳。

coordiante对象包含包括经纬度在内的一系列信息具体如下所示。

latitude：一个十进制表示的纬度坐标。

longitude：一个十进制表示经度的坐标。

altitude：海拔高度(以米为单位，如果是5，表示精确到5米范围)。

accuracy：当前经纬度信息的精度(以米为单位)。

altitudeAccuracy：当前海拔高度的精度。

heading：代表当前设备的朝向，该值是以弧度为单位，指示了按顺时针方向相对

于正北的度数(例如：heading为270的时候表示正西方)。接下来，用通过一个案例来演示如何使GeolocationAPI获取当前位置。代码如demo3-6所示。

demo3-6.html

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script>
         function getMyPosition(){
           if(window.navigator.geolocation){
               //获取当前位置..
               alert("正在获取您的位置.");
               //如果获取位置成功，会调用名字为successPosition 的方法.
               navigator.geolocation.getCurrentPosition
               (successPosition,errorPosition);
            }else{
               alert("您当前的浏览器不支持..");
            }
       }
       function successPosition(position){
          var jd=position.coords.longitude;//经度
          var wd=position.coords.latitude;//纬度
          alert(jd+","+wd);
        }
        //如果没有获取到位置，就会调用这个方法
        function errorPosition(){
                alert("获取位置失败.");
        }
        getMyPosition();
    </script>
</head>
<body>
</body>
</html>

因为Geolocation获取当前定位除了浏览器的支持，还需要硬件设备的支持，上述代码在不支持该操作的设备上运行的结果如图3-8和图3-9。

图3-8普通PC提示对话框1

图3-9普通PC提示对话框2