HTML5 地理定位

HTML的地理定位API是用来定位用户的位置的.

定位用户的位置

HTML的地理定位API是用来获取用户的地理位置的.

这能获取隐私,除非用户同意,不然位置是不可用的.

注意:设备如果有GPS,地理定位会更加精确,例如:手机.

用HTML的Geolocation

getCurrentPosition()函数是用来获取用户的位置.

下面的例子返回用户位置的纬度和经度:

<!doctype html>
<html lang="en">
<head>
</head>
<body>
<div id="demo"></div>
<script>
    var demoDIV=document.getElementById('demo');
    if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(function (pos) {
            demoDIV.innerText="纬度:".
concat(' ',pos.coords.latitude).
concat(' 经度:',pos.coords.longitude);
        },function (err) {
            console.log(err);
            demoDIV.innerText='获取失败:'.concat(err.message);
        });
    }else{
        demoDIV.innerText='浏览器不支持地理定位';
    }

</script></body></html>

例子解释:

检测浏览器是否支持地理定位(Geolocation)
如果支持,运行getCurrentPosition()方法.如果失败了,显示一个失败信息给用户,如果成功了,返回一个包含经纬度的对象,然后把经纬度显示给用户.

上面的例子是一个很简单的地理定位脚本,没有对错误进行详细的处理.

处理错误

getCurrentPosition()方法的第二个参数是用来处理错误信息的.指定一个函数来处理获取用户位置失败后的信息:

<!doctype html>
<html lang="en">
<head>
</head>
<body>
<div id="demo"></div>
<script>
    var demoDIV=document.getElementById('demo');
    if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(function (pos) {
            demoDIV.innerText="纬度:".
concat(' ',pos.coords.latitude).
concat(' 经度:',pos.coords.longitude);
        },showError);
    }else{
        demoDIV.innerText='浏览器不支持地理定位';
    }
    function showError(error) {
        switch(error.code) {
            case error.PERMISSION_DENIED:
                demoDIV.innerHTML = "用户拒绝获取地理位置信息.";
                break;
            case error.POSITION_UNAVAILABLE:
                demoDIV.innerHTML = "位置信息不可用.";
                break;
            case error.TIMEOUT:
                demoDIV.innerHTML = "获取用户位置信息超时了.";
                break;
            case error.UNKNOWN_ERROR:
                demoDIV.innerHTML = "出现了未知错误.";
                break;
        }
    }
</script></body></html>

在地图上显示位置

要在地图上显示位置信息,你需要访问地图服务,例如:百度地图,腾讯地图和高德地图等等.

特定位置信息

这个页面演示了怎么获取当前用户的位置信息.

Geolocation对于定位信息也非常有用,例如:

最新本地信息
显示用户附近的景点
导航(GPS)

getCurrentPosition()方法返回的数据

getCurrentPosition()方法如果成功了会返回一个对象

对象里有纬度,经度和精度属性等信息.

如果可用,其它属性也会返回:

属性	说明
coords.latitude	十进制的纬度
coords.longitude	十进制的经度
coords.accuracy	位置的精确性
coords.altitude	以米为单位的海拔高度,平均海平面为基面.
coords.altitudeAccuracy	位置的精确高度
coords.heading	从北向顺时针方向的航向
coords.speed	每秒的速度(以米为单位)
timestamp	返回date/time

Geolocation对象 - 其它一些有趣的方法

watchPosition() - 返回用户的当前位置,并且继续返回用户移动后的位置(像车里的GPS导航).

clearWatch() - 停止watchPosition()方法.

下面的例子展示了watchPosition()方法.你需要一个精确的GPS设备来测试(像苹果手机):

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"></head>
<body>
<div id="demo"></div>
<script>
    var x = document.getElementById("demo");
    getLocation();
    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.watchPosition(showPosition);
        } else {
            x.innerHTML = "Geolocation在这个浏览器上不支持.";
        }
    }
    function showPosition(position) {
        x.innerHTML = "纬度: ".concat(' ',position.coords.latitude).
concat('经度: ',position.coords.longitude);
    }
</script></body></html>

评论区

21技术 www.21xrx.com 备案号：蜀ICP备17043188号-2

其它

提取图片文字免费的JetBrains license services json在线解析 base64加解密文章搜索