geolocation——定位

  PC——IP地址

    精度比较低

    IP库

      Chrome -> Google

  手机——GPS

  window.navigator.geolocation

    单次    getCurrentPosition(成功, 失败, 参数)

      enableHighAccuracy      高精度模式——更慢、更费电

      timeout                 超时

      maximumAge              缓存时间

      结果：

        latitude/longitude    纬度/经度

        altitude              海拔高度

        accuracy              精确度

        altitudeAccuracy      高度精确度

        heading               朝向

        speed                 速度

    监听    watchPosition(成功, 失败, 参数)

　demo；

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <script type="text/javascript">

    window.onload=function (){

      let oBtn=document.getElementById('btn1');

      oBtn.onclick=function (){

        if(window.navigator.geolocation){

          navigator.geolocation.getCurrentPosition(res=>{

            alert('成功');

          }, err=>{

            alert('失败');

          }, {

            /*

            enableHighAccuracy          //高精度模式

            timeout                     //超时时间

            maximumAge                  //缓存

            */

          });

        }else{

          alert('你的浏览器不支持定位');

        }

      };

    };

    </script>

    <title></title>

  </head>

  <body>

    <input type="button" name="" value="定位" id="btn1">

  </body>

</html>

　　

H5-geolocation学习的更多相关文章

  1. 值得H5前端学习的60个JS插件(含DEMO演示)

    下面也可以说是H5前端学习的js插件大全.基本包含了大部分的前端最前沿的js插件和库. 布局 SuperEmbed.js- 是一个Javascript库,可检测出网页上的内嵌视频并使他们能够变成响应式 ...

  2. HTML5 Geolocation学习

    GeolocationAPI学习,我写的挺枯燥的,直接跳到最后看示例. 5.1 位置信息 HTML5 Geolocation API的使用方法相当简单.请求一个位置信息,如果用户同意,浏览器就会返回位 ...

  3. H5性能测试学习

    工欲善其事,必先利其器,在做H5前端性能测试之前,选择合适的工具能让我们的测试工作事半功倍.本文要提到的工具有两类: 一类是抓包工具,如Fiddler.Charles等.这类工具不仅可以抓包,还可以对 ...

  4. H5的学习之旅-H5的实体（14）

    H5有些关键字比如<等等是显示不出来的,这时候,就需要用实体来表示,实体我理解就是最初的编码 代码实例 <!DOCTYPE html> <html lang="en& ...

  5. H5案例学习笔记

    ★基础篇     增加主体结构元素    

  6. h5 meta学习

    定义针对搜索引擎的关键词:<meta name="keywords" content="meta,red" /> 定义对页面的描述:<meta ...

  7. H5 css学习

    p{text-indent:2em;}段前空两格   段落排版--行间距(行高) p{line-height:1.5em;} 段落排版--中文字间距.字母间距  h1{    letter-spaci ...

  8. 新站上线啦，Html5Think，H5优秀资源的收集、学习、分享和交流

    最近闲来做了个H5资源站,刚刚有点资源,可以访问交流下. 栏目: H5网站模板 H5动画特效 H5资源工具 H5学习资料 致力于H5的学习,通过各个H5优秀案例的学习,逐步完善自己的H5体系,有朝一日 ...

  9. 2017.3.12 H5学习的第一周

    本周我开始了H5的学习,在这一周里我们从html的基本标签开始一直讲到了才算css的用法,接下来我将记录下来本周我学到的H5的内容. 首先是声明文档,声明文档类型是HTML5文件,它在HTML文档必不 ...

  10. 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

随机推荐

  1. PostgreSQL 12 文档: 部分 I. 教程

    部分 I. 教程 欢迎来到PostgreSQL教程.下面的几章将为那些新接触PostgreSQL.关系数据库概念和 SQL 语言的读者给出一个简单介绍.我们只假定读者拥有关于如何使用计算机的一般知识. ...

  2. 即构发布 LCEP 产品「RoomKit」 ，实现房间内0代码接入

    2021年2月5日,即构科技正式发布全新形态「低代码互动平台」(Low-code Engagement Platform,简称LCEP)产品「RoomKit」. RoomKit定位为低代码互动平台(L ...

  3. 如何修改NuGet默认全局包文件夹的位置？

    由于一些历史原因,重装系统成为Windows用户解决疑难杂症的祖传手艺.受此影响,给硬盘分盘几乎成为了一种执念,少则C.D两个盘,夸张一点的5~6个盘的也不是没有. PS:macOS和Linux一直都 ...

  4. vue+element 判断table表格输入不能为空

    点击确定的时候,判断表格其中某行某值不能为空 1.HTML <div class="app-container"> <el-form ref="form ...

  5. 封装一个可以左右滑动的Blazor组件

    为什么要封装组件 最近写MAUI Blazor的时候,总是苦于对移动端没有什么好的支持,没有一个能左右滑动的tab切换组件. 既然没有,那就自己封装一个. 简单了解轮播图.tab切换的库之后,决定使用 ...

  6. PaddleSharp：跨越一年的版本更新与亮点

    PaddleSharp:跨越一年的版本更新与亮点 我始终坚信,开源社区是技术进步的重要推动力,也是我抽出我业余时间,投入到PaddleSharp这个项目的原因,这个项目充分展现了.NET在复杂计算领域 ...

  7. 模型部署 — PaddleNLP 基于 Paddle Serving 快速使用（服务化部署 - Docker）— 图像识别 + 信息抽取(UIE-X)

    目录 流程 版本 安装 Docker 安装 PaddleNLP 安装 环境准备 模型准备 压缩模型 下载模型 模型部署 环境配置 启动服务 测试 -- 暂时还没通过 重启 图像识别 + 信息抽取(UI ...

  8. echarts-for-react:实时更新数据

    解决方案 echarts 注解 详细链接 https://echarts.apache.org/zh/api.html#echartsInstance.setOption 参考链接 https://b ...

  9. 牛客小白月赛65 D题 题解

    原题链接 题意描述 一共有两堆石子,第一堆有 \(a\) 个,第二堆有 \(b\) 个,牛牛和牛妹轮流取石子,牛牛先手,每次取石子的时候只能从以下 \(2\) 种方案种挑一种来取(对于选择的方案数必须 ...

  10. 【pandas小技巧】--字符串转数值

    字符串转数字的用途和场景很多,其中主要包括以下几个方面: 数据清洗:在进行数据处理时,经常会遇到一些数据类型不匹配的问题,比如某些列中的字符串类型被误认为是数字类型,此时需要将这些字符串类型转换为数字 ...