HTML5中的地理定位API（Geolocation）

地理定位是HTML5中新增的API特性，它允许JavaScript程序向浏览器询问用户真实的地理位置。识别地理位置的一些应用就可以使用它来显示地图、导航和其它一些与用户当前位置有关的信息。当然，考虑到用户的隐私，支持地理定位API的浏览器在JavaScript程序获取用户物理位置前总是会询问用户是否允许获取当前位置。

navigator.geolocation
支持地理位置API的浏览器会定义 navigator.geolocation属性，用于获取用户的位置信息。此属性拥有以下方法：

navigator.geolocation.getCurrentPosition() 获取用户当前的位置。该方法需要接受一个回调函数作为参数，如果这个方法成功则返回的地理数据对象，该对象包含了用户地理位置的信息，信息内容大概为：

coords.latitude 用户地理位置的十进制纬度

coords.longitude 用户地理位置的十进制经度

coords.accuracy 用户地理位置的位置精度以米为单位

coords.altitudeAccuracy 用户地理位置的位置海拔精度以米为单位

coords.heading 用户设备当前移动的角度方向，以正北方向顺时针计算。

coords.speed 用户当前的移动速度以米为单位

timestamp 响应的时间/日期

navigator.geolocation.watchPosition() 该方法用于获取当前位置，同时不断地监视当前位置，一旦用户的地理位置发生变化，就会调用指定的回调函数。
navigator.geolocation.clearWatch() 该方法用于停止监视用户的位置。传递给此方法的参数应当是调用watchPosition()方法的返回值。

在包含GPS的设备上，通过GPS单元可以获取精确的地理位置。大多数情况下是通过web来获取位置的，当浏览器提供Internet I给web服务时，这个服务就能确定这个IP所属的城市。同时浏览器还可以请求操作获取这个IP附近的无线网络列表和信号强度，用于得到更加精确的位置信息。将这些信息将于高级web服务时，允许更加精准地计算位置。

这个此地理位置相关的技术包含通过网络数据交换或卫星之间的通信，因此地理位置API是异步的。

navigator.geolocation.getCurrentPosition()和 navigator.geolocation.watchPosition()这两个方法通过接收两个参数：第一个参数是一个回调函数，即当这个方法请求成功时，就会调用这个回调函数，这个回调函数包含了用户位置的信息。也就是回调函数的参数对象可以访问这些位置信息。第二个参数是在这两个方法失败时调用的回调函数。

在调用这三个方法前，我们应当书写一段代码用于浏览器判断是否支持navigator.getlocation这个属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=vjxRk3m3YYQ4uglexlrOxEVwGc2Nw6kF"></script>
    <style>
        #demo {
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="demo"></div>
    <input id="but" type="button"  value="点击获取当前位置">
</body>
<script>
    var but = document.getElementById("but");
    var x = document.getElementById("demo");

    but.onclick = function () {
        //首先是判断浏览器是否支持geolocation属性
        if (navigator.geolocation) {
            //开始请求地理位置信息。
            navigator.geolocation.getCurrentPosition(succFunction, errFunction);
        } else {
            x.innerHTML = "此浏览器不支持geolocation属性";
        }
    };

    //当getCurrentPosition()方法成功时调用的回调函数
    function succFunction (position) {
        //得到地理位置信息
        var latitude = position.coords.latitude; //十进制纬度
        var longitude = position.coords.longitude; //十进制经度
        var accuracy = position.coords.accuracy; //位置精度，以米为单位

        console.log("用户的位置：" + latitude + "," + longitude);
        console.log("用户地理位置：" + accuracy);

        //创建百度地图实例
        var map = new BMap.Map("demo"); //创建地图实例
        var point = new BMap.Point(latitude, longitude); //创建点坐标
        map.centerAndZoom(point, 15);  //初始化地图，设置中心坐标和地图级别
    }

    //当getCurrentPosition()方法不成功时
    function errFunction (err) { //错误信息
        var err = err.code + ":" + err.message;
        alert(err);
    }

</script>
</html>


其中,位于BMap命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象(这里是container)。地图添加到demo容器里，所以要确保demo容器在页面有宽和高，所以设置了style，如上，ak是你申请的秘钥。

watchPosition()获取当前位置，并继续返回用户移动时更新的位置信息。注：需要具有GPS的设备测试。

<script>
    var but = document.getElementById("but");
    var x = document.getElementById("demo");

    but.onclick = function () {
        //首先是判断浏览器是否支持geolocation属性
        if (navigator.geolocation) {
            //开始请求地理位置信息。
            navigator.geolocation.watchPosition(succFunction);
        } else {
            x.innerHTML = "此浏览器不支持geolocation属性";
        }
    };

    //当watchPosition()方法成功时调用的回调函数
    function succFunction (position) {
        //得到地理位置信息
        var latitude = position.coords.latitude; //十进制纬度
        var longitude = position.coords.longitude; //十进制经度
        var accuracy = position.coords.accuracy; //位置精度，以米为单位

        x.innerHTML = "latitude：" + latitude + "<br>" + "longitude：" + longitude;
        console.log("用户的位置：" + latitude + "," + longitude);
        console.log("用户地理位置：" + accuracy);
    }

</script>

HTML5中地理定位API的实现需要掌握的知识：

地理定位API属性是navigator.geolocation。
属性拥有的方法有三个：getCurrentPositoin()方法用于获取用户当前位置，watchPosition()方法用于监视用户位置，它不仅获取当前位置，还返回用户移动后的位置信息，clearWatch()方法用于停止用于监视，它接收的参数是watchPosition()方法的返回值。getCurrentPosition()和watchPosition()方法接收两个参数：方法成功时调用的回调函数和方法失败时调用的回调函数，回调函数的参数是参数对象，该对象包含了用户位置的以下信息：

1、coords.latitude 十进制纬度

2、coords.longitude 十进制经度

3、coords.accuracy 用户地理位置精度以米为单位

4、coords.altitude 海拔高度以米为单位

5、coords.heading 用户设备移动的方向，以正北方顺时针角度开始计算

6、coords.speed 用户移动的速度以米/每秒计算

地理位置获取流程：
1、打开需要获取位置的web应用。
2、应用向浏览器请求地理位置，询问用户是否允许获取当前位置信息。
3、如果用户允许，浏览器从设备上获取信息。
4、浏览器将获取到的信息发送到一个信任的位置服务器，服务器返回地理信息。

HTML5地理定位的实现：1、实现基于浏览器（无需后端支持）获取用户的地理位置信息技术。2、精确定位用户的地理位置。3、持续追踪用户的地理位置（watchPosition()）
4、需要与Google Map 、Baidu Map交与呈现位置信息。

使用HTML5中的地理定位API需要用地图API，百度地图API参考：百度地图API
百度地图开放平台参考：百度地图开放平台

需要在一个script中引入地图API：
<script src="http://api.map.baidu.com/getscript?v=2.0&ak=您的密钥"></script>

其中，ak表示密钥，密钥需要自己创建