html5获取地理位置信息API

在HTML5中,可以看下如何使用Geolocation API来获得用户的地理位置信息,如果该浏览器支持的话,且设备具有定位功能,就能够直接使用这组API来获取当前位置的信息,该API可以应用在移动设备上的地理定位;为window.navigator 对象新增了一个geolocation属性,可以使用Geolocation API来对该属性进行访问。window.navigator对象中的geolocation属性有三个方法如下:

第一个方法是:getCurrentPosition 该方法来取得用户当前的地理位置信息,该方法定义如下:

getCurrentPosition(onSuccess,onError,options);

其中第一个参数为获取当前地理位置信息成功时所执行的回调函数:该方法使用如下:

navigator.geolocation.getCurrentPosition(function(position)) {
    // 获取成功时的的处理;//参数position是地理位置对象
}

第二个参数为获取当前地理位置信息失败的回调函数,如果获取地理位置信息失败,你可以通过该回调函数把错误信息提示给用户,该方法使用如下:

navigator.geolocation.getCurrentPosition(function(position){// 获取成功时的的处理;//参数position是地理位置对象
},function(error)) {// 获取失败时的的处理;
}

该回调函数使用一个error对象作为参数,该对象具有以下两个属性:

code属性: code属性有以下值:

用户拒绝了位置服务(属性值为1的情况下)。

获取不到位置信息(属性值为2的情况下)。

获取信息超时错误(属性值为3的情况下)。

message属性:message属性为一个字符串,在该字符串中包含了错误信息。

综合以上两个回调函数,我们可以编写如下代码:

navigator.geolocation.getCurrentPosition(function(position){var coords = position.coords;// 获取精度
   console.log(coords.longitude);// 获取纬度
   Console.log(coords.latitude);// 获取经度或者纬度的精度(以米为单位)
   Console.log(coords.accuracy);
},function(error){// 错误的回调函数Var errorTypes = {1: ‘位置服务被拒绝’,2: ‘获取不到位置信息’,3: ‘获取信息超时’
};alert(errorTypes[error.code]);
});

getCurrentPosition的第三个参数可以省略,是可选参数,这些可选属性如下:

enableHighAccuracy: 是否要求高精度的地理位置信息,这个参数在很多设备上设置了没有用,因为使用在设备上时需要结合设备电量,具体地理情况综合考虑,因此可以使用该属性默认值;

timeout:对地理位置信息的获取操作做一个超时限制(单位为毫秒),如果在该时间内未获取到地理位置信息,则返回错误;

maximumAge: 对地理位置进行缓存的有效时间(单位为毫秒).比如:maximumAge:120000(1分钟是60000),如果10点整的时候获取过一次地理位置信息,10:01的时候,再次调用navigator.geolocation.getCurrentPosition重新获取地理位置的信息,则返回的依然为10:00时的数据(因为设置的缓存有效时间为2分钟)。超过这个时间后缓存的地理位置信息被废弃;尝试重新获取地理位置信息;如果该值被指定为0,则无条件重新获取新的地理位置信息。

第二个方法是:watchPosition;该方法来持续监视当前地理位置的信息,它会定期地自动获取,该方法使用方法如下:

watchCurrentPosition(onSuccess,onError,options);

该方法的三个参数的含义与getCurrentPosition方法的参数相同;该方法返回一个数字,这个数字的使用方法与javascript脚本中的setInterval方法的返回的参数使用方法类似;可以使用clearWatch方法停止对当前地理位置信息的监视。如下

clearWatch(watchId);(停止获取当前用户的地理位置信息,这也是第三个方法);

我们接下来可以来了解下position对象的属性如下:

latitude:  当前地理位置的纬度;

longitude: 当前地理位置的经度;

altitude: 当前地理位置的海拨高度(不能获取为null)

accuracy: 获取到的纬度或者经度的精度(以米为单位);

altitudeAccurancy: 获取到的海拨高度的经度(以米为单位);

speed:设备的前进速度(以米/秒为单位,不能获取时为null)

timestamp: 获取地理位置信息时的时间。

下面我们来看下我现在公司的经度和纬度,代码如下:

function get_location() {if(navigator.geolocation) {navigator.geolocation.getCurrentPosition(function(position){// 显示地理信息var longitude = position.coords.longitude,latitude = position.coords.latitude;showObject(position.coords,0);},function(err){// 错误处理switch(err.code) {case 1: alert("位置服务被拒绝。");break;case 2: alert("暂时获取不到位置信息。");break;case 3:alert("获取信息超时。");break;default:alert("未知错误。");break;}},{enableHighAccuracy: true,maximumAge: 100,accuracy:100})}else {alert("你的浏览器不支持使用HTML5来获取地理位置信息");}}function showObject(obj,k) {// 递归显示objif(!obj) {return;}for(var i in obj) {if(typeof(obj[i] != "object") || obj[i] == null) {for(var j = 0; j < k; j++) {document.write("&nbsp;&nbsp;&nbsp;&nbsp;")}document.write(i + " : " + obj[i] + "<br/>");}else {document.write(i + " : "+"<br/>");showObject(obj[i],k+1);}}}
get_location();

截图如下:

html5获取地理位置信息API相关推荐

  1. 微信上的网站 用HTML5获取地理位置

    今天折腾了一天,因为项目的需要,需要在微信网站上得到当前的地理位置.采用的是HTML5开发,但是实验了很多种方法,都不行.HTML5获取地理位置信息,是通过ip获取,ip的位置和你本人的位置差距还是很 ...

  2. html5网站抓取,微信上的网站 用HTML5获取地理位置

    今天折腾了一天,因为项目的需要,需要在微信网站上得到当前的地理位置.采用的是HTML5开发,但是实验了很多种方法,都不行.HTML5获取地理位置信息,是通过ip获取,ip的位置和你本人的位置差距还是很 ...

  3. html5实现获取地理位置信息并定位

    html5实现获取地理位置信息并定位 一.总结 一句话总结:获取地理位置是分两步:获取经纬度和根据经纬度获取地址信息 a.HTML5的Geolocation(地理位置功能(Geolocation AP ...

  4. html5中获取地理位置信息

    HTML5提供了地理位置定位功能(Geolocation API),能确定用户位置,我们可以借助HTML5的该特性开发基于地理位置信息的应用.本文结合实例给大家分享如何使用HTML5,借助百度.谷歌地 ...

  5. 百度api:根据经纬度获取地理位置信息

    调用百度api,根据经度和纬度获取地理位置信息,返回Json. C#代码: using Newtonsoft.Json; using Newtonsoft.Json.Linq; using Syste ...

  6. vue 地理位置定位_cordova+vue webapp 使用html5获取地理位置

    1.在HTML5中使用Geolocation.getCurrentPosition()方法来获取地理位置. 语法: navigator.geolocation.getCurrentPosition(s ...

  7. flutter利用高德如何获取地理位置信息bug处理

    flutter中对于利用高德如何获取地理位置信息, 1.在高德开发平台,注册成为开发者,并获取key 2.安装依赖 对于如何安装第三方插件 请点击此处pub.dev amap_location 3.修 ...

  8. uniapp APPH5端获取地理位置信息(百度地图高德地图)

    APP&H5端获取地理位置信息 一.app端 1.在需要使用的页面中 onShow(){//#ifdef APP-PLUS// 获取定位信息this.getLocations();//#end ...

  9. 根据IP获取地理位置信息 — Golang

    根据IP获取地理位置信息 - Golang 1 介绍 1.1 ip2region 1.2 geoip2-golang 1.3 总结 2 使用 2.1 ip2region 2.2 geoip2-gola ...

最新文章

  1. 首次成功实施 XSS 攻击,盗取目标网站大量 VIP 帐号
  2. 多数据中心的百万级消息服务实战
  3. DetachedCriteria 分页Projection取消聚合条件
  4. 泰信通获得正唐资本首轮投资,加速进军SDN、云网市场
  5. 「后端小伙伴来学前端了」Vue中全局事件总线(GlobalEventBus)原理及探究过程
  6. cad工具箱详细讲解_2019CAD教程讲解 插件工具箱,从安装到应用整个过程,手把手教你...
  7. python卡尔曼滤波跟踪_使用卡尔曼滤波器以圆周运动跟踪机器人
  8. webpack轻松入门教程
  9. 社区儿童计算机活动总结,寒假社区服务活动总结
  10. MyBatis源码阅读(二) --- 执行流程分析
  11. 饮用水配送管理系统项目解决方案
  12. Win10 微软拼音添加小鹤双拼
  13. 解决云帆小说下载阅读器不能下载https网址的问题
  14. Linpack的安装与测试(Mpi+Goto+hpl)
  15. 打乱魔方软件_怎样打乱魔方
  16. 数据链路层的主要功能与服务
  17. 【Unity】那些你不得不用的好插件!
  18. Prometheus监控告警搭建(一)
  19. 植物病原菌致病性测定
  20. CPU到计算机刷新速度,计算机CPU运算速度是多少

热门文章

  1. Vue | 实现页面跳转刷新,在Vue页面中调用其他页面的方法
  2. 苹果cms V10模板 仿特视网自适应模板
  3. 官方版.NET SDK连线更新(2011/01/19)
  4. CSS3: 移动端开发中 max-device-width 与 max-width 的区别
  5. 解决WP表前缀更换后出现的You do not have sufficient permission
  6. 在Ubuntu上安装使用深度影音深度音乐
  7. Shell编程:awk使用总结
  8. Python实例讲解 -- wxpython 最小到托盘及欢迎图片
  9. 仿微软Office 迷你工具条(简易编辑器)
  10. C/C++——从ctime使用到随便测一样冒泡排序和堆排序的效率