HTML5 地理信息离线存储

最新推荐文章于 2024-08-11 18:40:36 发布

狗熊掰棒棒

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量150

点赞数

分类专栏：前端文章标签： html5 javascript

本文链接：https://blog.csdn.net/Ferris_/article/details/103718645

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

地理信息离线存储

地理信息

定义：

 定义用户的位置，使用HTML5 Geolocation API用于获得用户地理位置

注意

  除非用户同意，否则用户位置信息是不可用的

HTML5判断浏览器是否支持地理信息

//检测当前设备是否支持H5 Geolocation API
if(navigator.geolocation){
  //地理位置服务可用
  alert("您的浏览器支持地理信息");
}else{
   //地理位置服务不可用
   alert("您的浏览器不支持地理信息");
}

HTML5 - 使用地理信息

使用getCurrentPosation()方法来获得用户位置
语法：navigator.geolocation.getCurrentPosation(success, error, options)

Success

 成功得到位置信息时的回调函数，使用Position对象作为唯一参数

error[可选参数]

 获取位置信息失败时的回调函数，使用Position对象作为唯一参数

options[可选参数]
```
 PositionOptions对象
```

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    #box {
      width: 500px;
      height: 500px;
      border: 2px solid deeppink;
    }
  </style>
</head>
<body>
  <button id='btn'> 请求位置信息 </button>
  <div id="box"></div>
  <script>
    let btn = document.getElementById('btn');
    let box = document.getElementById('box');
    //点击按钮获取地理位置信息
    btn.onclick = function () {
      //getCurrentPosition与定时器setInterval类似多次请求，因为位置需要不间断的获取
      //直接navigator.geolocation表示单次获取位置
      navigator.geolocation.getCurrentPosition(function (position) {
        box.innerHTML += "经度" + position.coords.longitude;
        box.innerHTML += "纬度" + position.coords.latitude;
        box.innerHTML += "准确度" + position.coords.accuracy;
        box.innerHTML += "海拔" + position.coords.altitude;
        box.innerHTML += "海拔准确度" + position.coords.altitudeAcuracy;
        box.innerHTML += "行进方向" + position.coords.heading;
        box.innerHTML += "地面速度" + position.coords.speed;
        box.innerHTML += "请求的时间" + new Date(position.timestamp);
      }, function (err) {
            alert(err.code);
            //code：返回获取位置的状态
            //  0  :  不包括其他错误编号中的错误
            //  1  :  用户拒绝浏览器获取位置信息
            //  2  :  尝试获取用户信息，但失败了
            //  3  :  设置了timeout值，获取位置超时了
      }, {
          enableHighAcuracy: false, //位置是否精确获取
          timeout: 5000,            //获取位置允许的最长时间
          maximumAge: 1000          //多久更新获取一次位置
        })
    }
  </script>
</body>
</html>

离线存储

定义

HTML5引入了应用程序缓存，这意味着web应用可进行缓存，并可在没有因特网连接时进行访问

离线存储优势

离线浏览：即当用户网络断开时，可以继续访问页面
访问速度快：将资源缓存到本地，已缓存资源加载更快
减少服务器负载：浏览器只会从服务器下载更新过或者更改过的资源

Cache Manifest基础

每个指定了manifest的页面在用户对其访问时都会被缓存
如果未指定manifest属性，则不会被缓存
manifest文件建议扩展名是：".appcache"

manifest 文件实例

CACHE MANIFEST   
# 2019-09-01 v1.0.0 
CACHE:  
style/index.css   
js/index.js
  
NETWORK:   
login.php   
  
FALLBACK:   
/html5/

离线缓存实例
HTML5离线缓存是基于应用程序的，必须部署到服务器上。
基于vscode可以用live server插件实现。

<!DOCTYPE html>
<html lang="en" manifest="cache.appcache">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style/index.css">
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<h1>你好网易!!!</h1>
</body>
</html>

狗熊掰棒棒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 地理信息离线存储

地理信息离线存储地理信息HTML5判断浏览器是否支持地理信息HTML5 - 使用地理信息离线存储地理信息定义：定义用户的位置，使用HTML5 Geolocation API用于获得用户地理位置注意除非用户同意，否则用户位置信息是不可用的HTML5判断浏览器是否支持地理信息//检测当前设备是否支持H5 Geolocation APIif(navigator....
复制链接

扫一扫