H5-geolocation学习
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学习的更多相关文章
- 值得H5前端学习的60个JS插件(含DEMO演示)
下面也可以说是H5前端学习的js插件大全.基本包含了大部分的前端最前沿的js插件和库. 布局 SuperEmbed.js- 是一个Javascript库,可检测出网页上的内嵌视频并使他们能够变成响应式 ...
- HTML5 Geolocation学习
GeolocationAPI学习,我写的挺枯燥的,直接跳到最后看示例. 5.1 位置信息 HTML5 Geolocation API的使用方法相当简单.请求一个位置信息,如果用户同意,浏览器就会返回位 ...
- H5性能测试学习
工欲善其事,必先利其器,在做H5前端性能测试之前,选择合适的工具能让我们的测试工作事半功倍.本文要提到的工具有两类: 一类是抓包工具,如Fiddler.Charles等.这类工具不仅可以抓包,还可以对 ...
- H5的学习之旅-H5的实体（14）
H5有些关键字比如<等等是显示不出来的,这时候,就需要用实体来表示,实体我理解就是最初的编码 代码实例 <!DOCTYPE html> <html lang="en& ...
- H5案例学习笔记
★基础篇 增加主体结构元素
- h5 meta学习
定义针对搜索引擎的关键词:<meta name="keywords" content="meta,red" /> 定义对页面的描述:<meta ...
- H5 css学习
p{text-indent:2em;}段前空两格 段落排版--行间距(行高) p{line-height:1.5em;} 段落排版--中文字间距.字母间距 h1{ letter-spaci ...
- 新站上线啦，Html5Think，H5优秀资源的收集、学习、分享和交流
最近闲来做了个H5资源站,刚刚有点资源,可以访问交流下. 栏目: H5网站模板 H5动画特效 H5资源工具 H5学习资料 致力于H5的学习,通过各个H5优秀案例的学习,逐步完善自己的H5体系,有朝一日 ...
- 2017.3.12 H5学习的第一周
本周我开始了H5的学习,在这一周里我们从html的基本标签开始一直讲到了才算css的用法,接下来我将记录下来本周我学到的H5的内容. 首先是声明文档,声明文档类型是HTML5文件,它在HTML文档必不 ...
- 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...
随机推荐
- 图扑 AR 技术应用与管理：施工建造、机柜扫描、办公室导航解决方案
随着科技的不断革新和创新,越来越多的行业开始迎来数字化时代的变革.建筑行业作为人类历史上最重要的产业之一,在数字化转型方面同样也在不断推进.图扑软件结合 AR 技术的应用,为建筑行业带来了更加便捷高效 ...
- 2023-07-15：给你一个 非递减 的正整数数组 nums 和整数 K， 判断该数组是否可以被分成一个或几个 长度至少 为 K 的 不相交的递增子序列。 输入：nums = [1,2,2,3,3,
2023-07-15:给你一个 非递减 的正整数数组 nums 和整数 K, 判断该数组是否可以被分成一个或几个 长度至少 为 K 的 不相交的递增子序列. 输入:nums = [1,2,2,3,3, ...
- 用字符串表达式执行引擎消除掉if else if
背景 最近我搞了个微信机器人,@机器人 xxx 这样来发送命令 能拿到的信息有,消息内容,消息发送人,消息所在的群id等 需要根据消息内容或者消息发送群id等不同的条件组合来决定走哪个处理逻辑. 简单 ...
- 2021-3-9 excel导出
public void ExportExcel(DataTable dt) { //要添加epplus的nuget包 ExcelPackage.LicenseContext = LicenseCont ...
- 三个编程思想：面向对象编程、面向接口编程、面向过程编程【概念解析系列_1】【C# 基础】
〇.前言 对于 .Net 中的编程思想还是十分重要的,也是编码出高效的程序的基础! 在使用之前了解其本质,那么用起来就游刃有余.下面来简单对比下三个编程思想,看下它们都是什么,它们之间又有什么关系. ...
- 如何配置Linux的互信
如何配置Linux的互信? 这里针对的是root用户的,普通用户家目录/home/test/.ssh. 1.在客户端生成公钥私钥对 [root@auto1 ~]# ssh-keygen -t rsa ...
- GIT保存记录原理之commit对象
GIT 中提交对象非常的重要,我们通过它记录代码提交过程.进行文件保存.回退等操作,那么它是怎样帮助我们记录这些信息的呢?其实就是都保存在项目根目录的 .git 文件夹中. 新建空项目 ```gitD ...
- 微软面向企业的Private ChatGPT 参考应用 Chat Copilot
这两天你可能看过这篇文章:微软面向企业的Private ChatGPT 开源!超详细安装流程反馈![1], 这篇文章顶多就是一个Azure OpenAI 服务的简单Demo, 就连插件机制都没有,这也 ...
- Programming abstractions in C阅读笔记: p118-p122
<Programming Abstractions In C>学习第49天,p118-p122,总结如下: 一.技术总结 1.随机数 (1)seed p119,"The init ...
- Redis系列19：LRU内存淘汰算法分析
Redis系列1:深刻理解高性能Redis的本质 Redis系列2:数据持久化提高可用性 Redis系列3:高可用之主从架构 Redis系列4:高可用之Sentinel(哨兵模式) Redis系列5: ...