Geolocation地理定位

由于地理位置涉及用户的个人隐私,因此在任何时候页面第一次使用该定位功能时,都需要用户确认是否获取位置信息。

Geolocation API

  • GeolocationAPI通过window.navigator.geolocation获取对地理定位的访问,该对象有如下三个方法:
    • getCurrentPosition()
    • watchPosition()
    • clearWatch()
  • 首次获取当前位置

通过getCurrentPosition()方法获取当前的位置信息,可以传递三个参数,

  • 第一个参数为必填参数,其作用为获取地理位置信息成功后返回执行的回调函数
  • 第二个参数为获取地理位置失败时执行的回调函数,可选
  • 第三个参数为一些可选参数设置,
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5 GeolocationAPI</title>
        <style>
            body {background-color:#fff;}
        </style>
    </head>
    <body>
        <p id="geo_loc"><p>
        <script>
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {  
                    var str = '您当前de位置,纬度:' + position.coords.latitude + ',经度:' + position.coords.longitude;
                    document.getElementById("geo_loc").innerHTML = str;
                }, function(err) {
                    document.getElementById("geo_loc").innerHTML = err.code + "\n" + err.message;
                });
            }else{
                document.getElementById("geo_loc").innerHTML = "您当前使用的浏览器不支持Geolocation服务";
            }
        </script>
    </body>
</html>

执行结果如下截图:

地理位置授权
输出当前经纬度

上例中,回调函数中的position对象包含一个coords属性,其表示一系列的地理坐标信息

  • latitude 十进制表示的纬度

  • longitude 十进制表示的经度

  • altitude 位置相对于椭圆球面的高度

  • accuracy 以米为单位的纬度和经度坐标的精度水平

  • altitudeAccuracy 所得高度的估算精度,以米为单位

  • heading 宿主设备的当前移动方向,以度为单位,相对于正北方向顺时针方向计算

  • speed 设备的当前对地速度,以米/秒为单位

  • 监视移动设备的位置变化

watchPosition 和 clearWatch 是一对方法
watchPosition的语法跟getCurrentPosition的语法相同,watchPosition方法会返回一个唯一标识,clearWatch可通过这个唯一标识清除watchPosition方法的监听。

var watchID = navigator.geolocation.getCurrentPosition(function(position) {  
    var str = '您当前de位置,纬度:' + position.coords.latitude + ',经度:' + position.coords.longitude;
    document.getElementById("geo_wat").innerHTML = str;

}, function(err) {
    document.getElementById("geo_wat").innerHTML = err.code + "\n" + err.message;
});
navigator.geolocation.clearWatch(watchID);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容