【H5】 经纬度位置获取navigator.geolocation.getCurrentPosition
navigator.geolocation.getCurrentPosition(function(){
})
经度 : coords.longitude
纬度 : coords.latitude
准确度 : coords.accuracy
海拔 : coords.altitude
海拔准确度 : coords.altitudeAcuracy
行进方向 : coords.heading
地面速度 : coords.speed
请求的时间: new Date(position.timestamp)
获取方法代码如下：
<!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>
* { margin: 0; padding: 0;}
#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>
IE浏览器运行结果如下：
谷歌浏览器限制了获取
【H5】 经纬度位置获取navigator.geolocation.getCurrentPosition的更多相关文章
- 解决window.navigator.geolocation.getCurrentPosition在IOS10系统中无法进行地理定位问题
昨天接到用户通知说在点击"看场地"时无法获取地理位置信息. 在接到通知时,首先想到的是排查机型问题.由于客户多为IOS用户,所以最先看的是在安卓是有没有此问题的发生,调查结果为安卓 ...
- 完美解决window.navigator.geolocation.getCurrentPosition，在IOS10系统中无法定位问题
目前由于许多用户都将电话升级到了iOS系统,苹果的iOS 10已经正式对外推送,相信很多用户已经更新到了最新的系统.然而,如果web站没有及时支持https协议的话,当很多用户在iOS 10下访问很多 ...
- IOS10 window.navigator.geolocation.getCurrentPosition 无法定位问题
在iOS 10中,苹果对webkit定位权限进行了修改,所有定位请求的页面必须是https协议的. 如果是非https网页,在http协议下通过HTML5原生定位接口会返回错误,也就是无法正常定位到用 ...
- HTML5浏览器定位navigator.geolocation.getCurrentPosition
<!DOCTYPE html> <html> <body> <p id="demo">点击这个按钮,获得您的坐标:</p> ...
- 用navigator.geolocation.getCurrentPosition在IOS10以上的系统无法定位
昨天老板告诉我代码有Bug(定位失败),于是各种测试最终发现IOS10以上版本手机不能成功(穷,买不起iphone,测试不完全),先贴失败代码: var city =""; nav ...
- navigator.geolocation.getCurrentPosition
navigator.geolocation.getCurrentPosition Geolocation API Specification 2nd Edition W3C Recommendatio ...
- H5 Notes：Navigator Geolocation
H5的地理位置API可以帮助我们来获取用户的地理位置,经纬度.海拔等,因此我们可以利用该API做天气应用.地图服务等. Geolocation对象是我们获取地理位置用到的对象. 首先判断浏览器是否支持 ...
- H5 移动端获取当前位置
3种方法:1.H5自带的方法,获取经纬度2.通过地图提供的JS.获取位置3.通过微信的API(这个需要公众号 / 小程序) 1.通过H5自带的获取经纬度的方法 优点: 需要引用的资源较少,H5自带的方 ...
- 使用navigator.geolocation来获取用户的地理位置信息
使用navigator.geolocation来获取用户的地理位置信息 W3C 中新添加了一个名为 Geolocation的 API 规范,Geoloaction API的作用就是通过浏览器获取用户的 ...
随机推荐
- C#基础知识学习 linq 和拉姆表达式二
- BeginLinux Programming chapter16: X11桌面系统简介
当前两个最流行的linux desktop environment: GNOME 和KDE, 两者对应的图形库分别是 GTK+ 和 QT. GNOME与KDE与X11的关系: X defines no ...
- springboot集成elk 三：springboot + Elasticsearch Rest-Client
注: 该集成方式,对Elasticsearch无版本限制,但是需要自行封装请求,解析结果等. <dependency> <groupId>org.elasticsearch. ...
- 【牛客网】Idol Master
[牛客网]Idol Master 也是一道网络流解线性规划 不过需要从小于号的那边解 限制是\(a \leq \sum_{i = 1}^{k} x_{i}\leq b\) 其中\(0 \leq x_{ ...
- 剑指offer60：把二叉树打印成多行。上到下按层打印二叉树。
1 题目描述 从上到下按层打印二叉树,同一层结点从左至右输出.每一层输出一行. 2 思路和方法 vector变量存储每一层的元素vector<vector<int> > ans ...
- 利用Python进行数据分析_Pandas_数据加载、存储与文件格式
申明:本系列文章是自己在学习<利用Python进行数据分析>这本书的过程中,为了方便后期自己巩固知识而整理. 1 pandas读取文件的解析函数 read_csv 读取带分隔符的数据,默认 ...
- c++学习（三）------static数据与成员函数
疑惑: static类型成员是类的全局变量,所有类的实例都享有这个变量,或者说这个变量不属于任何一个类的实例. static类型变量可以为private,或public或其他(static数据可以被继 ...
- shell习题第20题：统计文件大小
[题目要求] 加入需要每小时执行一个脚本.功能:当时间是0点和12点时,将/data/log/下的文件全部清空,注意只能清空文件内容而不能删除文件.而其他时间只需要统计一下每个文件的大小,一个文件一行 ...
- LaTeX技巧96：LaTeX 图片控制命令，位置控制
LaTeX技巧96:LaTeX 图片控制命令,位置控制 2012-04-05 17:25:44 zd0303 阅读数 28512更多 分类专栏: Latex LaTeX 控制图片的位置,就是加感叹 ...
- df执行hang住
一.现象 在linux操作系统中,执行df -h命令,后hang住 二.思路 排查是否存在Nfs问题,无法正常挂载nfs路径导致的问题. 三.解决过程 3.1 cat /etc/rc.local #m ...