关于html:HTML5中的地理定位APIGeolocation

天文定位是 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 示意密钥，密钥须要本人创立

关于html:HTML5中的地理定位APIGeolocation

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）