美文网首页
Geolocation地理定位

Geolocation地理定位

作者: 幽谷听泉 | 来源:发表于2016-09-01 14:22 被阅读0次

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

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);

相关文章

网友评论

      本文标题:Geolocation地理定位

      本文链接:https://www.haomeiwen.com/subject/ruicettx.html