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被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电. ...
随机推荐
- CXF生成调用webservice的客户端
首先当前是从官网下载cxf组件. http://cxf.apache.org/download.html 下载后解压,在这里主要是用到解压后的bin目录中的wsdl2java.bat该批处理文件. 可 ...
- Selenium自动化工具工作原理
http://blog.csdn.net/five3/article/details/6790925 原文作者信息如下,需要更多信息请去原作者博客查看: 作者:hyddd 出处:http://www. ...
- iOS开发中虚拟键盘相关的坑
初学者在学习iOS开发时,遇到在一个textField中输入完内容后却发现虚拟键盘无法隐藏起来而不知所措的情况的人一定不占少数吧.这篇文章就说说我遇到的和虚拟键盘有关的三个问题及解决对策. 在模拟器测 ...
- C#笔试题面试题锦集(全)总20篇
前些时候找过一次工作,收集了很多不错的笔试题目.共享一下:) C#笔试题面试题锦集(20) 微软应试题目 (2010-01-15 21:32) C#笔试题面试题锦集(19) 雅虎C#题目 (2010- ...
- 第十章 OPENWRT安装nohup,因为不明原因nohup没有安装
Available pacaagess里找了coreutils-nohup包,安装好就行了 运行nohup自己的程序的时候可能会出现一下: root@OpenWrt:~# nohup: ignorin ...
- [Gradle] Gradle 构建工具的未来
转载地址:http://www.infoq.com/cn/news/2011/04/xxb-maven-6-gradle Maven面临的挑战 软件行业新旧交替的速度之快往往令人咂舌,不用多少时间,你 ...
- 权限项目总结(四) shiro 授权
概述 Authorization(授权):不难理解,授权就是用来控制当前訪问用户在訪问系统资源权限. 这个词也做证书的解释,从证书这个角度来讲,推断是否拥有对资源訪问的权限时.当前用户须要提供证书. ...
- Informatica 常用组件Source Qualifier之六 外部联接
可以使用源限定符和应用程序源限定符转换在相同的数据库中执行两个源的外部联接.当 PowerCenter 执行外部联接时,它将返回其中一个源表的所有行和另一个源表中匹配联接条件的行. 如果您需要联接两个 ...
- dedecms v5.5 final getwebshell exploit(datalistcp.class.php)
测试方法: @Sebug.net dis本站提供程序(方法)可能带有攻击性,仅供安全研究与教学之用,风险自负! <?php print_r(' +---------------------- ...
- thinkphp问题
这几天组里有个php系统报安全漏洞,负责的厂商跑了,没办法,被组长丢过来改漏洞,记录一下部分内容. 配置php的环境 参考https://blog.csdn.net/u011415782/artic ...