HTML5地理位置定位 Geolocation API

http://bbs./thread-202927-1-1.html

地理定位(geolocation)是最令人兴奋，而且得到了广泛支持的一个新API。通过这套API，JavaScript代码能够访问到用户的当前位置信息。当然，访问之前必须得到用户的明确许可，即同意在页面共享其位置信息。如果页面尝试访问其地理定位信息，浏览器就会显示一个对话框，请求用户许可共享其位置信息。

Geolocation API在浏览器中的实现是navigator.geolocation对象，这个对象包含3个方法。第一个是getCurrentPosition()，调用这个方法就会触发请求用户共享地理定位信息的对话框。这个方法接收3个参数：成功回调函数、可选的失败回调函数和可选的选项对象。

其中，成功返回调用函数会接收到一个Position对象参数，该参数有两个属性：coords和timestamp。而coords对象中将包含下列与位置相关的信息。

• latitude:以十进制度数表示的纬度。
• longitude:以十进制度数表示的经度。
• accuracy:经、纬度坐标的精度，以米为单位。有些浏览器还可能会在coords对象中提供如下属性。
• altitude:以米为单位的海拔高度，如果没有相关数据则值为null。
• altitudeAccuracy:海拔高度的精度，以米为单位，数值越大越不精确。
• heading：指南针的方向，0°表示正北，值为NaN表示没有检测到数据。
• speed：速度，每秒移动多少米，如果没有相关数据则为null。
  

在实际开发中，latitude和longitude是大多数Web应用最常用到的属性。例如，以下代码将在地图上绘制用户的位置：

var watchId = navigator.geolocation.watchPosition(function(position){

    drawMapCenteredAt(position.coords.latitude, position.coords.longitude);

}, function(error) {

    console.log("Error code: " + error.code);

    console.log("Error message: " + error.message);

});

clearWatch(watchId);

以上例子调用了watchPosition()方法，将返回的标识符保存在了watchId中。然后，又将watchId传给了clearWatch()，取消了监控操作。

支持地理定位的浏览器有IE9+、Firefox 3.5+、Opeara 10.6+、Safari 5+、Chrome、iOS版Safari、Android版WebKit。
下面是一个简单的示例：

<div id="output"></div>

<script type="text/javascript">

    window.onload = function () {

        if (navigator.geolocation) {

            navigator.geolocation.getCurrentPosition(function (position) {

                var latitude = position.coords.latitude;

                var longitude = position.coords.longitude

                document.getElementById("output").innerHTML = "纬度是；" + latitude + "<br>经度是：" + longitude;

            }, function (error) {

                document.getElementById("output").innerHTML = error.message || "获取地理位置的时候发生了错误。";

            }, function (error) {

                console.log("Error code: " + error.code);

                console.log("Error message: " + error.message);

            });

        } else {

            alert("你的浏览器不支持 Geolocation API")

        }

    }

</script>