window.navigator.geolocation 成功后返回参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
getCurrentPosition() 方法 - 返回数据
若成功,则 getCurrentPosition() 方法返回 Position 对象 有两个属性,其中有用的属性是 coords 对象
Position {coords: Coordinates, timestamp: 1518245599233}
coords:Coordinates 对象里面含下面的属性
accuracy:1033803 精度
altitude:null 海拔
altitudeAccuracy:null 海拔精度 PC端无 高度计硬件支持
heading:null 朝向 因为是PC端 没有指南针和gps等硬件支持,故求不到部分参数如 朝向等
latitude:3.1569485999999998 纬度
longitude:101.71230299999999 经度
speed:null 地面移动速度
__proto__:Coordinates
timestamp:1518245491454
__proto__:Position

//map.baidu.com 的开发者工具 可以 地图反查

// navigator.geolocation.watchPosition()的用法和 getCurrentPosition 用法类似,实时监听位置变化
//只是在第三个参数有一个刷新频率 frequency

示例如下:

  • geolocation 在移动端用的多,PC 端应用少,在手机上是有GPS 等硬件支持的,PC 端根据 IP 定位不准确,FirefoxChrome 在不翻墙的情况下 getCurrentPosition 函数失败,翻墙后 getCurrentPosition 成功
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Title</title>
    <style>
    #btn1 {
    width: 100px;
    height: 100px;
    background-color: blue;
    }
    </style>
    </head>
    <body>
    <div id="btn1"></div>
    <script>
    let btn1 = document.getElementById("btn1");
    btn1.onclick = function() {
    if (window.navigator.geolocation) {
    navigator.geolocation.getCurrentPosition((pos)=>{
    console.log(pos);
    console.log(pos.coords);
    alert("success");
    },(error)=>{
    alert("失败了");
    console.log(error);
    },{
    enableHighAccuracy: true,//高精度模式,费电,更慢
    timeout: 5000,//超时时间 5秒
    maximumAge: 0//最大的生存时间 也就是缓存
    });
    } else {
    alert('你的浏览器不支持定位');
    }
    };
    </script>
    </body>
    </html>