HTML5学习笔记 Geolocation(地理定位)
HTML5 Geolocation(地理定位)用于定位用户的位置。
定位用户的位置
html5 Geolocation API用于获得用户的地理位置
鉴于该特性可能低侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。

HTML5 -使用地理定位
请使用getCurrentPositon()方法来获得用户的位置
下例是一个简单的地理定位的实例,可返回用户位置的纬度和纬度
直接上代码吧:
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="该浏览器不支持获取地理位置。";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
实例解析:
检测是否支持地理定位
如果支持,则运行getCurrentPosition()方法。如果不支持,则几用户显示一段消息。
如果getCuurentPosition()运行成功,则向参数showPosition中规定的函数返回一个coordinates对象
showPostion()函数获取并显示经度和纬度
处理错误和拒绝
getCurrentPosition()方法的第二个参数用于处理错误,它规定当获取用户位置失败时运行的函数:
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="用户拒绝对获取地理位置的请求。"
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="位置信息是不可用的。"
break;
case error.TIMEOUT:
x.innerHTML="请求用户地理位置超时。"
break;
case error.UNKNOWN_ERROR:
x.innerHTML="未知错误。"
break;
}
}
Geolocation对象-其他有趣的方法
catchPosition()-返回用户的当前位置,并继续返回用户移动时的更新位置(就像汽车的GPS)
clearWatch()-停止watchPosition()方法
下面的例子展示watchPosition()方法,您需要一台精确的GPS设置来测试该例
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.watchPosition(showPosition);
}
else{x.innerHTML="该浏览器不支持获取地理位置。";}
}
function showPosition(position)
{
x.innerHTML="纬度: " + position.coords.latitude +
"<br>经度: " + position.coords.longitude;
}
</script>
本节完
HTML5学习笔记 Geolocation(地理定位)的更多相关文章
- HTML5学习总结-03 地理定位
一 地理定位 HTML5 Geolocation(地理定位)用于定位用户的位置. 1 地理定位 地理位置 经度 : 南北极的连接线 纬度 : 东西连接的线 位置信息从何而来: IP地址 G ...
- html5学习笔记一
HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg” controls=”controls”> ...
- ArcGIS案例学习笔记3_1_地理配准案例_目视找点
ArcGIS案例学习笔记3_1_地理配准案例_目视找点 计划时间:第3天上午 方法:地理配准/添加链接点/左键/右键/输入坐标 数据:江苏省.zip 矢量:省界,市界,GPS WGS84 地理坐标系 ...
- ArcGIS案例学习笔记3_1_地理配准案例_图面控制点
ArcGIS案例学习笔记3_1_地理配准案例_图面控制点 计划时间:第3天上午 目的:地形图控制点配准 数据:地形图drg 无坐标: 步骤 1.查看地图标注 2. 地理配准,添加控制点 3.结果: 联 ...
- Html5学习笔记1 元素 标签 属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HTML5学习笔记之表格标签
HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...
- HTML5 学习06——Geolocation(地理定位)
HTML5 Geolocation(地理定位) HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. HTML ...
- HTML5 学习笔记(一)——HTML5概要与新增标签
目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...
- HTML5 学习笔记--------》HTML5概要与新增标签!
一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电. ...
随机推荐
- ROS知识(3)----功能包package编译的两种方式
ROS的包编译有两种方法(我知道的),一种是用rosmake,这种方法简单:另一种是用catkin_make,这种方法更方便包的管理和开发.这两种方法都是先建立工作空间workspace(类似于vs下 ...
- hibernate 结合servlet及 jsp 的使用
Hibernate结合JSP使用 前面几章详细的介绍了Hibernate的相关知识,这一章介绍Hibernate结合JSP和Servlet的使用,通过这一章的学习,可以加深对Hibernate的理解. ...
- HDU 4498 Function Curve (分段,算曲线积分)
Function Curve Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65535/65535 K (Java/Others)To ...
- ADC Power Supplies
http://www.planetanalog.com/author.asp?section_id=3041&doc_id=563055 Jonathan Harris, Product Ap ...
- Digital Current-Mode Control Challenges Analog Counterparts
http://electronicdesign.com/digital-ics/digital-current-mode-control-challenges-analog-counterparts ...
- Spring发送带附件邮件
下面是一个例子使用Spring通过Gmail SMTP服务器来发送电子邮件附件.为了包含附件的电子邮件,你必须使用 Spring的JavaMailSender及MimeMessage 来代替 Mail ...
- PHP:IIS下的PHP开发环境搭建
背景 发现书柜中有好几本PHP的图书,决定还是学学PHP,本文介绍一下在Windows环境下PHP开发环境的搭建. 运行环境搭建 下载和安装下面三个软件: IIS. http://php.iis.ne ...
- chromium的安装程序
转自:http://www.xue163.com/182/6/1822338.html#pinglun 这篇文章主要简单讲解chromium的安装程序mini_installer 在编译mini_in ...
- android组件之DrawerLayout(抽屉导航)-- 侧滑菜单效果
转载请注明出处:http://blog.csdn.net/crazy1235/article/details/41696291 一. 介绍 导航抽屉显示在屏幕的最左侧,默认情况下是隐藏的,当用 ...
- 返回content-length=0问题解决
遇到一个奇怪问题,有时候会不显示css或图片文件,通过调试工具发现请求返回长度都是0.研究半天未果,初步猜测可能是过滤器给拦截了. 果然在一个过滤器中发现相关代码: HttpRequestWrappe ...