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的更多相关文章

  1. 解决window.navigator.geolocation.getCurrentPosition在IOS10系统中无法进行地理定位问题

    昨天接到用户通知说在点击"看场地"时无法获取地理位置信息. 在接到通知时,首先想到的是排查机型问题.由于客户多为IOS用户,所以最先看的是在安卓是有没有此问题的发生,调查结果为安卓 ...

  2. 完美解决window.navigator.geolocation.getCurrentPosition,在IOS10系统中无法定位问题

    目前由于许多用户都将电话升级到了iOS系统,苹果的iOS 10已经正式对外推送,相信很多用户已经更新到了最新的系统.然而,如果web站没有及时支持https协议的话,当很多用户在iOS 10下访问很多 ...

  3. IOS10 window.navigator.geolocation.getCurrentPosition 无法定位问题

    在iOS 10中,苹果对webkit定位权限进行了修改,所有定位请求的页面必须是https协议的. 如果是非https网页,在http协议下通过HTML5原生定位接口会返回错误,也就是无法正常定位到用 ...

  4. HTML5浏览器定位navigator.geolocation.getCurrentPosition

    <!DOCTYPE html> <html> <body> <p id="demo">点击这个按钮,获得您的坐标:</p> ...

  5. 用navigator.geolocation.getCurrentPosition在IOS10以上的系统无法定位

    昨天老板告诉我代码有Bug(定位失败),于是各种测试最终发现IOS10以上版本手机不能成功(穷,买不起iphone,测试不完全),先贴失败代码: var city =""; nav ...

  6. navigator.geolocation.getCurrentPosition

    navigator.geolocation.getCurrentPosition Geolocation API Specification 2nd Edition W3C Recommendatio ...

  7. H5 Notes:Navigator Geolocation

    H5的地理位置API可以帮助我们来获取用户的地理位置,经纬度.海拔等,因此我们可以利用该API做天气应用.地图服务等. Geolocation对象是我们获取地理位置用到的对象. 首先判断浏览器是否支持 ...

  8. H5 移动端获取当前位置

    3种方法:1.H5自带的方法,获取经纬度2.通过地图提供的JS.获取位置3.通过微信的API(这个需要公众号 / 小程序) 1.通过H5自带的获取经纬度的方法 优点: 需要引用的资源较少,H5自带的方 ...

  9. 使用navigator.geolocation来获取用户的地理位置信息

    使用navigator.geolocation来获取用户的地理位置信息 W3C 中新添加了一个名为 Geolocation的 API 规范,Geoloaction API的作用就是通过浏览器获取用户的 ...

随机推荐

  1. vue 强制组件重新渲染

    参考链接:https://blog.csdn.net/zyx1303031629/article/details/86656785

  2. @ResponseBody使用

    @responseBody注解的作用是将controller的方法返回的对象通过适当的转换器转换为指定的格式之后,写入到response对象的body区,通常用来返回JSON数据或者是XML 数据,需 ...

  3. python 模块import(26)

    一.模块简介 python开发中,每一个.py文件都可以看作是一个模块,模块内部的函数或者方法可以被其他模块调用,至于函数或者方法是具体如何实现的,调用者不需要关心. 假如项目中既含有UI也有逻辑代码 ...

  4. 乐字节Java编程之方法、调用、重载、递归

    一.概述 方法是指人们在实践过程中为达到一定目的和效果所采取的办法.手段和解决方案. 所谓方法,就是解决一类问题的代码的有序组合,是一个功能模块.编程语言中的方法是组合在一起来执行操作语句的集合.例如 ...

  5. Java的设计模式(2)--单例模式

    保证一个类仅有一个实例,并提供一个访问它的全局访问点. 好处:    (1)频繁使用的对象,可以省略new操作花费的时间,这对于那些重量级对象而言,是非常客观的一笔开销.    (2)由于new的次数 ...

  6. 第2章:LeetCode--第二部分

    本部分是非Top的一些常见题型及不常见题 LeetCode -- Longest Palindromic Substring class Solution { public: int isPalind ...

  7. 矩阵拿宝物--Codeforces 1201D - Treasure Hunting Codeforces Round #577 (Div. 2)

    网上题解比较少,自己比较弱研究了半天(已经过了),希望对找题解的人有帮助 题目链接:https://codeforc.es/contest/1201/problem/D 题意: 给你一个矩形,起始点在 ...

  8. Python--context(上下文)(其实是环境)

    最近读Flask的文档,读到很多关于Context(上下文)的术语,如应用上下文,请求上下文等,查阅资料但没有得到理解?有没有比较好的解释? 每一段程序都有很多外部变量.只有像Add这种简单的函数才是 ...

  9. Board Game CodeForces - 605D (BFS)

    大意: 给定$n$张卡$(a_i,b_i,c_i,d_i)$, 初始坐标$(0,0)$. 假设当前在$(x,y)$, 若$x\ge a_i,y\ge b_i$, 则可以使用第$i$张卡, 使用后达到坐 ...

  10. hdu 6377 度度熊看球赛 (dp)

    大意: $n$对情侣, $2n$个座位, 对于一个方案, 若$k$对情侣相邻, 则喧闹值增加$D^k$, 求喧闹值期望. 跟CF 840C一样, 设$dp[i][j]$为$i$个人, 有$j$对情侣相 ...