HTML 5 基础教程

HTML是超文本标记语言，是一种专门用来制作网页的语言，而HTML5就是它的第五个版本，2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成，该标准针对当前互联网的飞速发展制定了更加标准的网页语言规范及适用功能，同时也给我们开发者带来了更多的开发选择，学习它是每个前端开发者必修的课程。

W3CAPI

2020-05-12 08:01:13

HTML5 Geolocation （地理定位）实例

上面我们已经了解了如何使用地理定位的代码编写步骤，下面我们来看看在日常开发中对与地理定位都有哪些实际用例。

一、获取用户当前的地理位置

<p id="demo">点击这个按钮，获得您的坐标：</p>
<button onclick="getLocation()">试一下</button>
<script type="text/javascript">
    var x=document.getElementById("demo");
    function getLocation()  {
        if (navigator.geolocation)  {
            navigator.geolocation.getCurrentPosition(showPosition,showError);
        } else {
            x.innerHTML="您的浏览器不支持 Geolocation！";
        }
    }
    function showPosition(position)  {
        x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude;
    }
    function showError(error)  {
        switch(error.code) {
            case error.PERMISSION_DENIED:
                x.innerHTML="用户不允许地理定位"
                break;
            case error.POSITION_UNAVAILABLE:
                x.innerHTML="无法获取当前位置"
                break;
            case error.TIMEOUT:
                x.innerHTML="获取位置超时"
                break;
            case error.UNKNOWN_ERROR:
                x.innerHTML="未知的错误"
                break;
        }
    }
</script>

执行一下

二、实时获取用户地理位置

watchPosition() - 该方法返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。
clearWatch() - 可以停止 watchPosition() 方法的持续运行。
该应用实例使用 watchPosition() 方法。需要一台带有 GPS 的设备来测试该例（比如手机、带GPS的手持设备等）会有很直观的效果。

<p id="demo">点击这个按钮，实时获得您的坐标：</p>
<button onclick="getLocation()">试一下</button>
<script type="text/javascript">
    var x=document.getElementById("demo");
    var count = 1;
    function getLocation() {
        if (navigator.geolocation) {
            //watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）
            navigator.geolocation.watchPosition(showPosition);
        } else {
            x.innerHTML="您的浏览器不支持 Geolocation 地理定位！";
        }
    }
    function showPosition(position)  {
        x.innerHTML="第 "+count+" 次获取位置，Latitude: " + position.coords.latitude +
            "<br />Longitude: " + position.coords.longitude;
        count++;
    }
</script>

执行一下