Geolocation API的基本知识
在HTML5中,为window.navigator对象新增了一个geolocation属性,可以使用Geolocation API来对该属性进行访问。window.navigator对象的geolocation属性存在三个方法。
取得当前地理位置
可以使用getCurrentPosition()方法来取得用户当前的地理位置信息,该方法的定义如下:
void getCurrentPosition(onSuccess, onError, options);
其中第一个参数为获取当前地理位置信息成功时所执行的回调函数,第二个参数为获取当前地理位置信息失败时所执行的回调函数,第三个参数为一些可选属性的列表。其中,后两个参数是可选的。
该方法成功取得地理位置信息时执行的回调函数使用方法如下:
navigator.geolocation.getCurrentPosition(function(position) { // 获取成功时的处理。 });
如果获取地理位置信息失败,可以通过该方法的第二个参数定义的回调函数把错误信息提示给用户。当在浏览器中打开使用了Geolocation API来获得用户当前位置信息的页面时,浏览器会询问用户是否共享位置信息,如果拒绝共享的话也会引起错误。该回调函数使用一个error对象作为参数,该对象具有两个属性:code属性、message属性。
code属性的可能值有:用户拒绝了位置服务(属性值“1”)、获取不到位置信息(属性值“2”)、获取信息超时(属性值“3”)。
message属性为一个字符串,在该字符串中包含了错误信息,这个错误信息在开发和调试时很有用。有些浏览器不支持该属性。
错误处理回调函数的使用方法如下:
navigator.geolocation.getCurrentPosition(function(position) {}, function(error) { var errorType = ['位置服务被拒绝', '获取不到位置信息', '获取信息超时']; alert(errorType[error.code - 1]); });
该方法第三个参数为可选属性列表,这些可选属性包括:
- enableHighAccuracy:是否要求高精度的地理位置信息,这个参数在很多设备上设置了都没用,因为使用在设置上时需要结合设备电量、具体地理情况来综合考虑。因此,多数情况下把该属性高为默认,由设备自身来调整。
- timeout:对地理位置信息的获取操作做一个超时限制(单位为毫秒)。如果在该时间内未获取到地理位置信息,则返回错误。
- maximumAge:对地理位置信息进行缓存的有效时间(单位为毫秒)。超过这个时间后缓存的地理位置信息被废弃,尝试重新获取地理位置信息。如果该值设置为“0”,则无条件重新获取新的地理位置信息。
该属性使用方法如下所示:
navigator.geolocation.getCurrentPosition(function(position) {}, function(error) {}, // 以下为可选属性。 { maximumAge: 60 * 1000 * 2, // 设置缓存有效时间为2分钟。 timeout: 5000 });
持续监视当前地理位置信息
使用watchPosition()方法来持续获取用户的当前地理位置信息,它会定期地自动获取,该方法定义如下:
int watchCurrentPosition(onSuccess, onError, options);
该方法三个参数的说明与使用方法与getCurrentPosition()方法相同。该方法返回一个数字,该数字的使用方法与JavaScript脚本中的setInterval()方法的返回结果类似,可以被clearWatch()方法使用,停止对当前地理位置信息的监视。
停止获取当前用户的地理位置信息
使用该方法可以停止对当前用户的地理位置信息的监视。该方法定义如下:
void clearWatch(watchId);
该方法的参数为调用watchCurrentPosition()方法监视地理位置信息时的返回参数。
position对象
如果获取地理位置信息成功,则可以在获取成功后的回调函数中通过访问position对象的属性来得到这些地理位置信息。position对象具有如下属性:
- latitude:当前地理位置的纬度。
- longitude:当前地理位置的经度。
- altitude:当前地理位置的海拔高度(不能获取时为null)。
- accuracy:获取到的纬度或经度的的精度(以米为单位)。
- altitudeAccurancy:获取到的海拔高度的精度(以米为单位)。
- heading:设备的前进方向。用面朝正北方向的顺时针旋转角度来表示(不能获取时为null)。
- speed:设备的前进速度(以米/秒为单位,不能获取时为null)。
- timestamp:获取地理位置信息的时间。
发表评论
-
使用选择器在页面中插入内容
2011-11-08 10:09 0使用选择器来插入文字 使用选择器来插入内容 在CSS2中, ... -
HTML5 绘制图形【4】
2011-11-08 08:39 1706绘制变形图形 坐标变换 绘制图形的时候,我们可能会想要旋转 ... -
CSS3 选择器【2】
2011-11-07 14:30 1115UI元素状态伪类选择器 UI元素状态伪类选择器的共同特征是: ... -
HTML5 绘制图形【3】
2011-11-05 19:28 1327绘制渐变图形 渐变是指在填充时从一种颜色慢慢过渡到另外一种颜 ... -
CSS3 选择器【1】
2011-11-06 12:19 1723选择器概述 选择器是CS ... -
HTML5 绘制图形【2】
2011-11-04 11:42 1437使用路径 绘制圆形 要 ... -
HTML5 绘制图形【1】
2011-11-03 12:48 1535canvas元素基础 canvas元素是HTML5中新增的一 ... -
CSS3 模块化结构
2011-11-03 19:12 1510CSS3中的模块 模块名称 功能描述 Basi ... -
HTML5 使用Web Worker处理线程
2011-11-01 09:16 4669基础知识 Web Worker是在HTML5中新增的,用来在 ... -
HTML5 Web Sockets通信
2011-10-29 20:15 4141基础介绍 Web Sockets是HTML5提供的在Web应 ... -
HTML5 跨文档消息传输
2011-10-29 19:11 2018基本介绍 HTML5提供了在网页文档之间互相接收与发送信息的 ... -
HTML5 离线应用程序【2】
2011-10-27 20:48 1877applicationCache对象 application ... -
HTML5 离线应用程序【1】
2011-10-27 14:02 1567离线Web应用程序介绍 在HTML5中新增了一个API,为离 ... -
HTML5 本地数据库
2011-10-24 21:03 2597本地数据库的基本概念 ... -
HTML5 Web Storage
2011-10-24 15:51 1623Web Storage简单使用 在HTML5中重新提供了一种 ... -
HTML5 多媒体播放【3】
2011-10-23 10:45 1247video元素和audio元素的方法 play()方法:使 ... -
HTML5 多媒体播放【2】
2011-10-22 21:14 1750音频和视频元素的属性 这两种元素所具有的属性大致相同,介绍如 ... -
HTML5 多媒体播放【1】
2011-10-21 18:58 956video与audio元素基础 在HTML5中,video元 ... -
HTML5 拖放API
2011-10-17 19:43 4961在HTML5中,已经支持在浏览器与其他应用程序之间的数据互相拖 ... -
HTML5 文件API
2011-10-16 18:49 5037在HTML5中,提供了一个关于文件操作的文件API,通过使用这 ...
相关推荐
html5获取当前地理位置
HTML5的地理位置定位功能是通过Geolocation API实现的,它允许网页应用获取用户设备的地理位置信息,例如经纬度坐标。这一特性在现代浏览器,尤其是移动设备上得到了广泛支持,但出于隐私考虑,用户必须同意应用获取...
- **HTML5地理位置定位**:这是一种新兴技术,允许Web应用程序访问用户的地理位置信息,无需依赖任何插件或本机应用程序。 - **W3C Geolocation API**:这是一个标准API,它使得开发人员能够编写跨平台的应用程序,...
HTML5的地理位置定位API允许网页获取用户的地理位置信息,如经度、纬度等,这些信息可以用于提供基于位置的服务,如地图导航、周边搜索等。这一特性依赖于浏览器的支持,大多数现代浏览器如Chrome、Firefox、Safari...
Html5中提供了地理位置信息的API,通过浏览器来获取用户当前位置。基于此特性可以开发基于位置的服务应用。在获取地理位置信息前,首先浏览器都会向用户询问是否愿意共享其位置信息,待用户同意后才能使用。 Html5...
本项目"IP获取地理位置asp"是基于ASP(Active Server Pages)和Access数据库技术实现的,它允许开发者通过用户的IP地址获取其大概的物理位置信息。在网页应用中,这种功能常用于提供个性化服务、安全验证、数据分析...
"地理位置.html"可能就是演示如何使用JavaScript与Geolocation API交互,请求用户授权后获取经纬度,并可能将这些信息显示在页面上,或者与地图服务结合使用。 说到地图,"带地图地理位置.html"可能结合了HTML5的...
在IT行业中,尤其是在Web开发领域,常常需要利用地图服务来获取和展示地理位置信息。Google Maps API 是一个广泛使用的工具,它允许开发者通过JavaScript或者其他的编程语言与Google Maps进行交互,实现各种功能,如...
1、location.html 在浏览器中打开页面,即可获取您当前的ip地址,和所在城市,以及城市地理位置编码。(以国家统计局为准) 2、Location.java 运行代码,即可 获取 location.html 中的信息。 放在web项目中,可获取...
在Vue.js应用中集成高德地图(Amap)以获取地理坐标信息是一项常见的需求,尤其在构建地理位置相关的Web应用时。高德地图API提供了丰富的功能,包括定位、路线规划、地图展示等。以下将详细介绍如何在Vue项目中使用...
在ECharts中,地理位置数据是非常重要的组成部分,尤其对于制作地图图表、飞线图等具有地理信息的视觉效果时。本篇将详细介绍ECharts如何使用地理位置数据以及其在“全国各省、市地理位置坐标”中的应用。 首先,...
地理位置获取流程: 1、用户打开需要获取地理位置的web应用。 2、应用向浏览器请求地理位置,浏览器弹出询问,询问用户是否共享地理位置。 3、假设用户允许,浏览器从设别查询相关信息。 4、浏览器将相关信息发送到...
利用Html5的新特性geolocation可以获取用户的地理位置定位信息,并借助百度活google的地图api将所获取的地理位置信息展示在地图上。 做这个实验时必须保证测试的页面部署在HTTP服务器上,否则如果直接浏览器从本地...
复制代码代码如下: /** * 以下为html5代码,获取地理位置 */ function getLocation() { //检查浏览器是否支持地理位置获取 if (navigator.geolocation) { //若支持地理位置获取,成功调用showPosition(),失败调用show...
HTML5定位技术是现代网页开发中的一个重要特性,它允许网页应用程序获取用户设备的地理位置信息,为用户提供更加个性化和精准的服务。这项技术主要依赖于Geolocation API,它在浏览器环境中提供了获取用户位置的能力...
【百度地图获取方圆地理位置】是基于HTML5技术与百度地图API实现的一项功能,它允许开发者在网页中获取特定地点周围的一定范围内地理位置信息。这项技术在众多应用场景中都非常实用,例如定位服务、导航系统、生活...
JavaScript 地理位置信息API是Web开发中一个强大的工具,允许开发者获取用户的地理位置数据,从而实现个性化的内容和服务。这项API是HTML5的一部分,被大多数现代浏览器所支持,包括Chrome、Firefox、Safari、Opera...