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(地理定位)的更多相关文章

  1. HTML5学习总结-03 地理定位

    一 地理定位 HTML5 Geolocation(地理定位)用于定位用户的位置. 1 地理定位 地理位置 经度  :   南北极的连接线 纬度  :   东西连接的线 位置信息从何而来: IP地址 G ...

  2. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

  3. ArcGIS案例学习笔记3_1_地理配准案例_目视找点

    ArcGIS案例学习笔记3_1_地理配准案例_目视找点 计划时间:第3天上午 方法:地理配准/添加链接点/左键/右键/输入坐标 数据:江苏省.zip 矢量:省界,市界,GPS WGS84 地理坐标系 ...

  4. ArcGIS案例学习笔记3_1_地理配准案例_图面控制点

    ArcGIS案例学习笔记3_1_地理配准案例_图面控制点 计划时间:第3天上午 目的:地形图控制点配准 数据:地形图drg 无坐标: 步骤 1.查看地图标注 2. 地理配准,添加控制点 3.结果: 联 ...

  5. Html5学习笔记1 元素 标签 属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...

  7. HTML5 学习06——Geolocation(地理定位)

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

  8. HTML5 学习笔记(一)——HTML5概要与新增标签

    目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...

  9. HTML5 学习笔记--------》HTML5概要与新增标签!

      一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电. ...

随机推荐

  1. 禁止body滚动允许div滚动防微信露底

    最近遇到一个需求,页面中只有一个div允许滚动,其他内容不允许滚动. 正常来讲加上 body{height:100%;overflow: hidden;} 应该就阻止页面滚动了.可是很悲催的是手机端并 ...

  2. 使用Redisson实现分布式锁

    原文:https://www.jianshu.com/p/cde0700f0128 1. 可重入锁(Reentrant Lock) Redisson的分布式可重入锁RLock Java对象实现了jav ...

  3. UML建模工具Visio 、Rational Rose、PowerDesign的比较

    UML建模工具Visio .Rational Rose.PowerDesign的比较   ROSE是直接从UML发展而诞生的设计工具,它的出现就是为了对UML建模的支持,ROSE一开始没有对数据库端建 ...

  4. sqlserver锁大全

    锁定提示                                 描述  HOLDLOCK        将共享锁保留到事务完成,而不是在相应的表.行或数据页不再需要时就立即释放锁.HOLDL ...

  5. Android学习进阶和IoC

    1.成为Android高手一般分为六个阶段: 第一阶段:熟练掌握Java SE,尤其是对其内部类.线程.并发.网络编程等需要深入研究:熟练掌握基于HTTP协议的编程,清楚POST和GET等请求方式流程 ...

  6. 判断浏览器内核JS代码

    <script type="text/javascript"> var Sys = {}; var ua = navigator.userAgent.toLowerCa ...

  7. node最简单的升级

    1.安装n插件 npm install -g n //全局安装 2.升级 n stable //升级 3.packjson升级 npm i -g npm-upgrade 4.升级 npm-upgrad ...

  8. utf8_general_ci、utf8_unicode_ci和utf8_bin的区别

    utf8_general_ci 不区分大小写,这个你在注册用户名和邮箱的时候就要使用. utf8_general_cs 区分大小写,如果用户名和邮箱用这个就会照成不良后果. utf8_bin: com ...

  9. Hadoop HDFS分布式文件系统设计要点与架构(转摘)

    Hadoop简介:一个分布式系统基础架构,由Apache基金会开发.用户可以在不了解分布式底层细节的情况下,开发分布式程序.充分利用集群的威力高速运算和存储.Hadoop实现了一个分布式文件系统(Ha ...

  10. .aspx(或.asp)文件与.html(.htm)文件的区别与联系

    由于都是用于描述网页文档的文件,自学asp.net起就对两者之间的关系很好奇 主要的区别在于,当用户请求页面时,它们在服务器的端的处理不同 下图解释客户端请求页面时,服务器端的处理流程: .html文 ...