一、什么是地理定位（Geolocation）？

• HTML5 Geolocation API 用于获得用户的地理位置。
• 该功能特性可能要侵犯用户的隐私，使用之前可能需要征询用户同意，否则用户位置信息是不可用的。

二、为什么需要地理定位（Geolocation）？

• Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 都支持使用 Geolocation（地理定位）
• Geolocation（地理定位）对于拥有 GPS 的设备，比如 iPhone，地理定位会更加精确

1. 检测浏览器是否支持地理定位：判断 navigator.geolocation 是否存在
2. 如果支持，则运行 Geolocation 对象的 getCurrentPosition() 方法：navigator.geolocation.getCurrentPosition(showPosition,showError)。如果不支持，则向用户显示一段消息
3. 如果 getCurrentPosition() 运行成功，则会回调 showPosition函数，并向 showPosition函数 传入 coordinates 对象
4. showPosition() 函数根据传入的 coordinates 对象 来获得并显示经度和纬度
5. 如果 getCurrentPosition() 运行失败，则会回调 showError 函数，并向 showError函数 传入错误代码

function getLocation()  {
    if (navigator.geolocation)  {
        navigator.geolocation.getCurrentPosition(showPosition,showError);
    } else {
        alert("您的浏览器不支持 Geolocation！");
    }
}
function showPosition(position)  {
    alert("Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude);
}
function showError(error)  {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            alert("用户不允许地理定位");
            break;
        case error.POSITION_UNAVAILABLE:
            alert("无法获取当前位置");
            break;
        case error.TIMEOUT:
            alert("获取位置超时");
            break;
        case error.UNKNOWN_ERROR:
            alert("未知的错误");
            break;
    }
}

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

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