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. CSS的outline属性

    input标签的outline的三个属性: outline-color outline-style outline-width 当设置input的focus状态的时候可以使用. input:focus ...

  2. Ubuntu 16.04开启SFTP服务

    说明:其实只要安装了SSH服务就已经具备了SFTP功能,这个用普通客户端无法连接,只能用支持SFTP协议的客户端才能连接. FileZilla作为FTP客户端,它也可以连接SFTP,SFTP的监听端口 ...

  3. 修改Linux默认启动级别或模式

    在Linux中有7种启动级别,默认是X-Window,像是Windows的窗口模式,而Linux的操作和配置一般我们都采用输入命令的方式来完成,像DOS操作系统一样,如何让Linux一启动就进入这种模 ...

  4. Java程序生成linechart report的方法

    iReport一般是一个设计阶段的工具.用来设计出报表的排版和内容.报表的动态生成须要程序来实现(毕竟报表的数据是动态的,数量是非常多的,不可能用iReport Preview的方式一个个手工去生成) ...

  5. cocos2d-x hello world及安卓平台迁移

        本节和大家一起新建一个项目工程,并通过cygwin迁移至android平台.      以下是本节主要内容: 利用cocos2d-x自带脚本,生成测试工程,并测试运行: 将该测试项目通过cyg ...

  6. 周赛 POJ 3934 Queue

    Description Linda is a teacher in ACM kindergarten. She is in charge of n kids. Because the dinning ...

  7. AC-PC线(前联合-后联合线)

    下面利用一张大脑矢状面(侧视图)来描述ac-pc的空间位置关系.前联合用红色点表示,后联合用黄色表示. 在Talairach 模板的官方文档中,AC-PC线从前联合AC的表面出发,延伸到后联合PC的中 ...

  8. HTML:图片和视频标签的使用

    介绍:在html网页中,图片和视频是基本的元素,在网页中插入图片和视频有自己的标签,分别是img.embed,来源都是使用src来链接. 插入图片: <img src="图片的来源&q ...

  9. 如何获取Android唯一标识(唯一序列号)

    有很多场景和需求你需要用到手机设备的唯一标识符. 在Android中,有以下几种方法获取这样的ID. 1. The IMEI: 仅仅只对Android手机有效: 1 2 TelephonyManage ...

  10. 集成禅道和svn

    转载:http://www.zentao.net/book/zentaopmshelp/137.html 说明:svn集成功能配置会比较复杂,我们会尽量通过文档来帮助大家配置成功!如果实在配置不成功的 ...