html5-深入浅出（3）

在线和离线事件

　　navigator.onLine 是一个值为 true/false  (true 表示在线， false 表示离线) 的属性。。当浏览器从在线与离线状态中切换时，会触发「online」与「offline」这两个事件，这两个事件会在页面的 <body> 上触发。此外，该事件会从 document.body 冒泡到 document 上，最后到达 window。两个事件都无法被取消(你无法阻止用户进入在线或离线状态)。

　　

<script>
        function updateOnlineStatus(event) {
            var condition = navigator.onLine ? "online" : "offline";
            console.log("Event: " + event.type + "; Status: " + condition);
        }
        window.addEventListener("offline", updateOnlineStatus)
        window.addEventListener("online", updateOnlineStatus)
 </script>

　　只有网络状态变化时，此事件才会触发

地理位置

　　地理位置 API 通过 navigator.geolocation 提供 。如果该对象可用，那么地理位置服务就可使用

　　

if ("geolocation" in navigator) {
  /* 地理位置服务可用 */
} else {
  /* 地理位置服务不可用 */
}

　　可以调用 getCurrentPosition() 函数获取用户当前定位位置。这会异步地请求获取用户位置，并查询定位硬件来获取最新信息。当定位被确定后，定义的回调函数就会被执行。您可以选择性地提供第二个回调函数，当有错误时会被执行。第三个参数也是可选的，您可以通过该对象参数设定最长可接受的定位返回时间、等待请求的时间和是否获取高精度定位。

　　

<!-- 
            enableHighAccuracy Boolean值、是否使用其最高精度来表示结果。如果值为 true，同时设备能够提供一个更精确的位置，那么设备就会使用这个位置。注意，这会导致较慢的响应时间或者增加电量消耗。如果值为false，会尽快返回一个低精度结果。默认值： false。
            timeout long值、它表明的是设备必须在多长时间（单位毫秒）内返回一个位置。默认值是 Infinity，意思是获取到一个位置之后，才会返回一个值。
            maximumAge long值、它表明可以返回多长时间（即最长年龄，单位毫秒）内的可获取的缓存位置。如果设置为 0, 说明设备不能使用一个缓存位置，而且必须去获取一个真实的当前位置。如果设置为 Infinity，那么不管设置的最长年龄是多少，设备都必须返回一个缓存位置。默认值：0。 -->
<script>
        if ("geolocation" in navigator) {
            /* 地理位置服务可用 */
            var geo = navigator.geolocation;
            geo.getCurrentPosition(function(position) {
                // latitude 维度  longitude 经度
                console.log(position.coords.latitude, position.coords.longitude)
            }, function(error) {
                /* 错误信息 */
                console.log(error)
            }, {
                enableHighAccuracy: true,
                maximumAge: 30000,
                timeout: 27000
            })
        } else {
            /* 地理位置服务不可用 */
        }
    </script>

监视定位

　　可以设定一个回调函数来响应定位数据发生的变更（设备发生了移动，或获取到了更高精度的地理位置信息）。可以通过 watchPosition() 函数实现该功能。它与 getCurrentPosition() 接受相同的参数，将上面的getCurrentPosition直接替换即可，而且watchPosition（）函数会返回一个 ID，唯一地标记该位置监视器，如果我们不想监听的话，可以使用该id ,清除监视定位

　　

navigator.geolocation.clearWatch(watchID);

　　

　　

 

posted @ 2019-03-20 19:25  善良的小邱子  阅读(421)  评论(0)    收藏  举报