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被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电. ...
随机推荐
- AJAX传递数组
在前台中Jq代码中中用JSON.stringify()将数组转换成 JSON字符串.在后台用json_decode()将JSON字符串转换成数组. 1.JSON.stringify(value [, ...
- PWM DAC Low Pass Filtering
[TI博客大赛][原创]LM3S811之基于PWM的DAC http://bbs.ednchina.com/BLOG_ARTICLE_3005301.HTM http://www.fpga4fun.c ...
- 杭州有赞公司招聘 资深PHP开发工程师(平台架构方向)、技术专家
- HDU 1159 && POJ 1458
最长公共子序列.状态转移方程见代码. #include <iostream> #include <cstdio> #include <cstring> using ...
- 什么是进程And线程
原创 2015年02月01日 11:49:01 学习.net 时遇到了两个新词汇:进程和线程.书上的太深奥,就查了查资料,整合下,希望对大家有帮助. [比喻]:用手去抓苹果,很显然一根手指是不行, ...
- Appium+python自动化22-Appium Desktop
Appium Desktop 原滋原味的官方文档 Appium Desktop是一款用于Mac.Windows和Linux的开源应用,它提供了Appium自动化服务器在一个漂亮灵活的UI中的强大功能. ...
- Android学习之Http使用Post方式进行数据提交(普通数据和Json数据)
转自:http://blog.csdn.net/wulianghuan/article/details/8626551 我们知道通过Get方式提交的数据是作为Url地址的一部分进行提交,而且对字节数的 ...
- maven添加本地非repository中的jar包
1.今天在使用maven编译打包一个web应用的时候,碰到一个问题: 项目在开发是引入了依赖jar包,放在了WEB-INF/lib目录下,并通过buildpath中将web libariary导入. ...
- popupWindow 用法总结 控制位置
android中的dialog,以及activiy形式的dialog均是模态对话框,对话框不消失时,不能对其他页面进行操作,也就是其他页面不能获得焦点.而PopupWindow是非模态对话框,对话框显 ...
- C++primer习题--第4章
本文地址:http://www.cnblogs.com/archimedes/p/cpp-primer-chapter4-ans.html,转载请注明源地址. [习题 4.7] 编写必要的代码将一个数 ...