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 ...
随机推荐
- 介绍Vue router的history模式以及如何配置history模式
引言 Vue router给我们提供了两种路由模式,分别是hash模式和history模式.其中默认是使用hash模式,即URL中带有一个#符号,但是处于业务或个人喜爱的差别,Vue router也提 ...
- 一张图告诉你如何提高 API 性能
API 性能是指一个 API 在执行其功能时的效率和性能表现,通常用于衡量 API 的响应时间.吞吐量.可伸缩性和稳定性等方面的表现. API 性能的指标包括: 响应时间: API 的响应时间是指从发 ...
- 2023-07-17：给定一个数组arr，长度为n， 再给定一个数字k，表示一定要将arr划分成k个集合， 每个数字只能进一个集合。 返回每个集合内部的平均值都累加起来最小的值。 平均值向下取整。 1
2023-07-17:给定一个数组arr,长度为n, 再给定一个数字k,表示一定要将arr划分成k个集合, 每个数字只能进一个集合. 返回每个集合内部的平均值都累加起来最小的值. 平均值向下取整. 1 ...
- 防缓存穿透利器-布隆滤器(BloomFilter)
布隆过滤器 1.布隆过滤器原理 1.1 什么是布隆过滤器 1.2 使用场景 1.3 原理 1.4 布隆过滤器的优缺点 2.实现方式 2.1 初始化skuId的布隆过滤器 2.1.1 RedisCons ...
- Vue: 配置axios基准路径并使用
配置 main.js文件修改 在main.js中进行如下修改 // 设置axios全局api import axios from 'axios' // 请求基准路径的配置 后台 axios.defau ...
- 王道oj/problem15(用c++的引用精简代码）
网址:http://oj.lgwenda.com/problem/15 思路:子函数的形参是指针的时候格式为 int*&p,且原函数实参为p 主函数使用fgets(字符串的指针,最大容量,st ...
- Python3入门基础教程
引:此文是自己学习python过程中的笔记和总结,适合有语言基础的人快速了解python3和没基础的作为学习的大纲,了解学习的方向.知识点:笔记是从多本书和视频上学习后的整合版. (一)初识pytho ...
- JVM性能监控和调优
JVM性能监控和调优 JVM(Java虚拟机)调优是为了优化Java应用程序的性能和稳定性.JVM调优的目的是通过调整JVM的配置参数和优化应用程序代码,使其在给定的硬件和软件环境下达到更好的性能表现 ...
- 知识图谱（Knowledge Graph）- Neo4j 5.10.0 Desktop & GraphXR 连接自建数据库
#输入查看数据库连接 neo4j$ :server status 添加 远程连接,输入连接地址 Graph Apps 选择 GraphXR 打开 显示
- [Lua][Love Engine] 有效碰撞处理の类别与位掩码 | fixture:setFilterData
有效的碰撞处理 只用IF判断 假设在一个物理世界,不希望两个同类实体发生碰撞,那么 local begin_contact_callback = function(fixture_a, fixture ...