`
lucifinilhades
  • 浏览: 87336 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

HTML5 获取地理位置信息

阅读更多

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:获取地理位置信息的时间。
分享到:
评论

相关推荐

    html5获取当前地理位置

    html5获取当前地理位置

    HTML5实现获取地理位置信息并定位功能

    HTML5的地理位置定位功能是通过Geolocation API实现的,它允许网页应用获取用户设备的地理位置信息,例如经纬度坐标。这一特性在现代浏览器,尤其是移动设备上得到了广泛支持,但出于隐私考虑,用户必须同意应用获取...

    HTML5地理位置定位

    - **HTML5地理位置定位**:这是一种新兴技术,允许Web应用程序访问用户的地理位置信息,无需依赖任何插件或本机应用程序。 - **W3C Geolocation API**:这是一个标准API,它使得开发人员能够编写跨平台的应用程序,...

    html5地理位置定位功能.zip

    HTML5的地理位置定位API允许网页获取用户的地理位置信息,如经度、纬度等,这些信息可以用于提供基于位置的服务,如地图导航、周边搜索等。这一特性依赖于浏览器的支持,大多数现代浏览器如Chrome、Firefox、Safari...

    Html5 Geolocation获取地理位置信息实例

    Html5中提供了地理位置信息的API,通过浏览器来获取用户当前位置。基于此特性可以开发基于位置的服务应用。在获取地理位置信息前,首先浏览器都会向用户询问是否愿意共享其位置信息,待用户同意后才能使用。 Html5...

    IP获取地理位置asp

    本项目"IP获取地理位置asp"是基于ASP(Active Server Pages)和Access数据库技术实现的,它允许开发者通过用户的IP地址获取其大概的物理位置信息。在网页应用中,这种功能常用于提供个性化服务、安全验证、数据分析...

    HTML5.rar_Table_html5_html5地图_地理位置

    "地理位置.html"可能就是演示如何使用JavaScript与Geolocation API交互,请求用户授权后获取经纬度,并可能将这些信息显示在页面上,或者与地图服务结合使用。 说到地图,"带地图地理位置.html"可能结合了HTML5的...

    googleMap根据经纬度获取地理位置

    在IT行业中,尤其是在Web开发领域,常常需要利用地图服务来获取和展示地理位置信息。Google Maps API 是一个广泛使用的工具,它允许开发者通过JavaScript或者其他的编程语言与Google Maps进行交互,实现各种功能,如...

    根据ip地址获取城市地理位置

    1、location.html 在浏览器中打开页面,即可获取您当前的ip地址,和所在城市,以及城市地理位置编码。(以国家统计局为准) 2、Location.java 运行代码,即可 获取 location.html 中的信息。 放在web项目中,可获取...

    vue使用高德地图获取地理坐标信息

    在Vue.js应用中集成高德地图(Amap)以获取地理坐标信息是一项常见的需求,尤其在构建地理位置相关的Web应用时。高德地图API提供了丰富的功能,包括定位、路线规划、地图展示等。以下将详细介绍如何在Vue项目中使用...

    echarts地理位置数据

    在ECharts中,地理位置数据是非常重要的组成部分,尤其对于制作地图图表、飞线图等具有地理信息的视觉效果时。本篇将详细介绍ECharts如何使用地理位置数据以及其在“全国各省、市地理位置坐标”中的应用。 首先,...

    html5中地理位置定位api接口开发应用小结

    地理位置获取流程: 1、用户打开需要获取地理位置的web应用。 2、应用向浏览器请求地理位置,浏览器弹出询问,询问用户是否共享地理位置。 3、假设用户允许,浏览器从设别查询相关信息。 4、浏览器将相关信息发送到...

    基于HTML5的地理位置定位实验代码

    利用Html5的新特性geolocation可以获取用户的地理位置定位信息,并借助百度活google的地图api将所获取的地理位置信息展示在地图上。 做这个实验时必须保证测试的页面部署在HTTP服务器上,否则如果直接浏览器从本地...

    简单html5代码获取地理位置

    复制代码代码如下: /** * 以下为html5代码,获取地理位置 */ function getLocation() { //检查浏览器是否支持地理位置获取 if (navigator.geolocation) { //若支持地理位置获取,成功调用showPosition(),失败调用show...

    HTML+JS获取地理位置(经纬度)

    HTML+JS获取地理位置(经纬度)

    html5定位获取当前位置并在百度地图上显示

    HTML5定位技术是现代网页开发中的一个重要特性,它允许网页应用程序获取用户设备的地理位置信息,为用户提供更加个性化和精准的服务。这项技术主要依赖于Geolocation API,它在浏览器环境中提供了获取用户位置的能力...

    百度地图获取方圆地理位置

    【百度地图获取方圆地理位置】是基于HTML5技术与百度地图API实现的一项功能,它允许开发者在网页中获取特定地点周围的一定范围内地理位置信息。这项技术在众多应用场景中都非常实用,例如定位服务、导航系统、生活...

Global site tag (gtag.js) - Google Analytics