HTML5(五)Geolocation
HTML5 Geolocation
定位用户的位置
HTML5 Geolocation API 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。
注意: Geolocation(地理定位)对于拥有 GPS 的设备,比如 iPhone,地理定位更加精确。
geography 地理; location 位置; Geo+location 地理位置; current 现在;
getCurrentPosition() 方法 - 返回数据
T若成功,则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用,则会返回其他下面的属性。
属性 | 描述 |
---|---|
coords.latitude | 十进制数的纬度 |
coords.longitude | 十进制数的经度 |
coords.accuracy | 位置精度 |
coords.altitude | 海拔,海平面以上以米计 |
coords.altitudeAccuracy | 位置的海拔精度 |
coords.heading | 方向,从正北开始以度计 |
coords.speed | 速度,以米/每秒计 |
timestamp | 响应的日期/时间 |
HTML5 - 使用地理定位
请使用 getCurrentPosition() 方法来获得用户的位置。
下例是一个简单的地理定位实例,可返回用户位置的经度和纬度:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Geolocation</title>
</head>
<body>
<button onclick="getLocation()">点击获取地理位置</button>
<p>数据信息:</p>
<p id="demo"></p>
<script>
var x=document.getElementById("demo");
function getLocation()
{
//检测是否支持地理定位
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(updatPos,errorLoca);
}
else
{
x.innerHTML="该浏览器不支持获取地理位置。";
}
}
//处理数据并显示
function updatPos(position){
var latitude = position.coords.latitude;//十进制单位
var longitude = position.coords.longitude;//十进制单位
var accuracy = position.coords.accuracy;//以m为单位制定纬度和经度与实际位置的差距
var timestamp = position.timestamp;//时间戳
var date = new Date(timestamp);//时间格式
console.log('经度坐标' + latitude.toFixed(2)); //保留两位小数
console.log('纬度坐标' + longitude.toFixed(2));
console.log('准确度' + accuracy);
console.log('获取位置数据的时间' + date);
x.innerHTML = "纬度: " + latitude.toFixed(2) + "<br>经度: " + longitude.toFixed(2);
}
function errorLoca(error){
var str = "";
switch(error.code){
case 0:
str ='位置信息获取失败,失败原因'+error.message;break;
case 1://错误编码 PERMISSION_DENIED
str ='用户拒绝共享其位置信息';break;
case 2://错误编码 POSITION_UNAVAILABLE
str = '尝试获取用户位置数据,但失败了' ;break;
case 3://错误编码 TIMEOUT
str = '尝试获取用户的位置数据超时' ;break;
}
console.log(str);
console.warn('ERROR(' + error.code + '): ' + error.message);
x.innerHTML = str;
}
</script>
</body>
</html>
实例解析:
- 检测是否支持地理定位
- 如果支持,则运行 getCurrentPosition() 方法。如果不支持,则向用户显示一段消息。
- 如果getCurrentPosition()运行成功,则向参数updatPos中规定的函数返回一个position参数
- 如果getCurrentPosition()运行失败,则向参数errorLoca中规定的函数返回一个error参数
- updatPos() 函数获得并显示经度和纬度
- errorLoca() 函数提示错误信息
Geolocation 对象 - 其他有趣的方法
watchPosition() - 返回用户的当前位置,并继续返回用户移动时的更新位置(就像汽车上的 GPS)。
clearWatch() - 停止 watchPosition() 方法
下面的例子展示 watchPosition() 方法。您需要一台精确的 GPS 设备来测试该例(比如 iPhone):
实例
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.watchPosition(showPosition);
}
else
{
x.innerHTML="该浏览器不支持获取地理位置。";
}
}
function updatPos(position)
{
x.innerHTML="纬度: " + position.coords.latitude +
"<br>经度: " + position.coords.longitude;
}
遇到问题以及解决方案
本机运行代码时,默认启动Chrome浏览器,每次点击获取地理位置按钮时,反应很慢需要等待许久。
得到报错如下图:
通过查阅资料了解到失败的几种原因。
Chrome控制台提示的错误:Network location provider at 'https://www.googleapis.com/' : No response received.
Chrome浏览器接入的定位服务在国外,有较大的限制,也会造成定位失败,且失败率较高。
换成系统自带的IE浏览器,完美运行
再尝试使用火狐浏览器运行,也成功定位
定位出现失败的原因
1. 第一种情况
浏览器不支持原生定位接口,如IE较低版本的浏览器,message字段包含Browser not Support html5 geolocation
信息。
2. 第二种情况
用户禁用了定位权限,需要用户开启定位权限,message字段包含Geolocation permission denied
。
3. 第三种情况
浏览器禁止了非安全域的定位请求,比如Chrome、IOS10已经陆续禁止,需要升级站点到HTTPS,message字段包含Geolocation permission denied
信息。注意:Chrome不会禁止localhost
域名HTTP协议下的定位。
4. 第四种情况
浏览器定位超时,包括原生的超时,可以适当增加超时属性的设定值以减少这一现象。某个别浏览器本身对定位接口的友好程度较弱,也会超时返回失败,message字段包含Geolocation time out
信息。
5. 第五种情况
Chrome、Firefox以及一些套壳浏览器接入的定位服务在国外,有较大的限制,也会造成定位失败,且失败率较高。
HTML5(五)Geolocation的更多相关文章
- 使用html5的Geolocation API实现定位
公司有个需求,需要获取用户的位置,所以看了下html5的Geolocation 这个新东西,发现挺好用的. <!DOCTYPE html> <html> <body> ...
- HTML5 中 Geolocation 获取地理位置的原理是什么?
http://www.zhihu.com/question/20473051?sort=created geolocation的位置信息来源包括GPS.IP地址.RFID.WIFI和蓝牙的MAC地址. ...
- HTML5五种客户端离线存储方案
最近折腾HTML5游戏需要离线存储功能,便把目前可用的几种HTML5存储方式研究了下,基于HT for Web写了个综合的实例,分别利用了Cookie.WebStorage.IndexedDB以及Fi ...
- 玩转html5(五)---月球绕着地球转,地球绕着太阳转(canvas实现,同样可以动哦)
关于运动速度的参数与真实速度有点差距,大家可以自行调整 <!DOCTYPE html> <html> <head> <meta http-equiv=&quo ...
- 开玩笑html5(五岁以下儿童)---绕地球月球,地球绕太阳运动(canvas实现,同样可以移动哦)
请珍惜劳动小编成果,这篇文章是原来小编,转载请注明出处. 速度的參数与真实速度有点差距.大家能够自行调整 <!DOCTYPE html> <html> <head> ...
- HTML5(五)——Canvas API
什么是 Canvas API? Canvas API(画布)提供了一个通过 javascript 和 html 的 canvas 元素来在网页上实时绘制图形的方式.可用于动画.游戏.图标.图片编辑等多 ...
- 基于 html5 geolocation来获取经纬度地址(copy)
geolocation来获取经纬度地址 以前如果要获取互联网用户所在地都是根据用户的IP地址来获取地理位置,这样获取到的数据和真实数据有很大的偏差.为了获取更加精确的位置,可以使用了html5的geo ...
- HTML5 Geolocation用来定位用户的位置。
HTML5 Geolocation用来定位用户的位置. 定位用户的位置 HTMl5 Geolocation API用来得到用户的地理位置. 由于这个可能和个人隐私相关.除非用户同意否则不能使用. 浏览 ...
- HTML5 Geolocation(地理位置)
HTML5 Geolocation(地理位置).是用来定位用户的位置的. HTML5 Geolocation API 用于获得用户的地理位置,鉴于该特性可能侵犯用户的隐私权,除非用户同意,否则不能获取 ...
- 你必须知道的28个HTML5特征、窍门和技术
注意:每周有那么几次,此列表会更新一些新的窍门,最终,本文会成为超级有用的资源.//zxx:丑话说在前头,我可没功夫更新,所以,即使到您女儿出嫁那天,本文还是28项内容 前端的发展如此之迅猛,一不留神 ...
随机推荐
- 小波学ItDay01--开始学习Servlet
曾经想过许多的开场白,有热血的,有励志的,最后思前想后还是用这句话开篇吧! 生活不会亏待每一个愿意努力的人-------<摘自某微信群的语录> 今天第一天,结合自己的进度开始学习Servl ...
- 基于ABP做一个简单的系统——实战篇:2.代码生成器
上一篇正说着呢,代码生成器就来了. 1.适用于ABP官网的Startup Template V3.x的包含了登录.用户等页面的MPA应用模板2.当前view仅支持文本框生成,远期规划根据字段类型生成不 ...
- 总结:修改相关postgres用户密码
1.修改linux系统postgres用户的密码 PostgreSQL会创建一个默认的linux用户postgres,修改该用户密码的方法如下: 步骤一:删除用户postgres的密码 sudo p ...
- Android使用OkHttp实现登录注册功能
客户端 在客户端,这里将登录和注册放在了同一个界面,在账号和密码两个EditText中输入内容后,按下LOGIN按钮,进行登录:按下REGISTER按钮,进行注册. 在写代码之前,先添加OkHttp的 ...
- 浅谈HTTPS和HTTP
1.HTTP和HTTPS的基本概念 HTTP:超文本传输协议,是互联网上应用最为广泛的一种网络协议,是一个客户端和服务端请求和应答的标准,用于WWW服务器传输超文本到本地浏览器的传输协议,它可以使浏览 ...
- .NET Framework、.NET Core 和 .NET 5+ 的产品生命周期
本文整理记录了 .NET Framework..NET Core 和 .NET 各个版本的产品支持周期和操作系统兼容性. 早于 .NET Framework 2.0 和 .NET Core 2.1 的 ...
- cc32b_demo-32dk2j_cpp_纯虚函数与抽象类2-txwtech
cc32b_demo-32dk2j_cpp_纯虚函数与抽象类2-txwtech //纯虚函数是用来继承用的//纯虚函数//抽象类-抽象数据类型//*任何包含一个或者多个纯虚函数的类都是抽象类//*不要 ...
- 002.OpenShift安装与部署
一 前置条件说明 1.1 安装准备概述 Red Hat OpenShift容器平台是由Red Hat作为RPM包和容器映像两种类型存在.RPM包使用订阅管理器从标准Red Hat存储库(即Yum存储库 ...
- 这一次搞懂Spring Web零xml配置原理以及父子容器关系
前言 在使用Spring和SpringMVC的老版本进行开发时,我们需要配置很多的xml文件,非常的繁琐,总是让用户自行选择配置也是非常不好的.基于约定大于配置的规定,Spring提供了很多注解帮助我 ...
- JavaWeb网上图书商城完整项目--13.项目所需环境的搭建
1.首先安装mysql 创建项目所需的数据库,直接运行项目提供的goods.sql文库 2.myeclipse创建一个web project ,项目的名称是goods 把视频中提供的项目原型下的提供的 ...