HTML5 获取地理位置信息
HTML5增加的新功能,获取地理位置信息,如果浏览器支持且设备有定位功能,就能够直接使用这组API来获取当前信息位置。该Geolocation API可以应用于移动设备中的地理位置。
- Geolocation API的基础知识
在HTML5中,为window.navigator对象新增了一个geolocaation属性,可以使用Geolocation API来对该属性进行访问。window.navigator对象的geolocation属性存在以下三个方法。
1 .取得当前地理位置 getCurrentPositon(onsuccess,onError,options)
其中第一个参数为获取当前地理位置信息成功时所执行的回调函数,第二个参数为获取当前地理位置信 息失败时所执行的回调函数,第三个参数为一些可选属性的列表。其中第二,第三个参数为可选属性。
- 1.1 getCurrentPosition方法中的第一个参数为获取当前地理位置信息成功时所执行的回调函数。该参数的 使用方法如下。在获取地理位置信息成功时执行的回调函数中,用到了一个参数position,它代表一个position对象。
navigator.geolocation.getCurrentPosition(function(position){
//获取成功时的处理
})
- 1.2 getCurrentPosition方法中的第二个参数为获取当前地理位置信息失败时所执行的回调函数。该回调函 数使用一个error对象作为参考,该对象具有以下两个属性:
code属性:用户拒绝了位置服务(属性值为1)
获取不到位置信息(属性值为2)
获取信息超时错误(属性值为3)
message属性:message属性为一个字符串,在该字符串中包含了错误信息,这个错误在开发和调试时 将很有用。
在getCurrentPosition方法中使用第二个参数来捕获错误信息的具体使用方法如下:
navigator.geolocation.getCurrentPosition(function(position){
var coords = position.coords;
showMap(coords.latitude,coords.longitude,coords.accuracy);
},
//捕获错误信息
function(error){
var errorTypes = {
1:'位置服务被拒绝',
2:'获取不到位置信息',
3:'获取信息超时',
};
alert(errorTypes[error.code] + ": 不能确定你的当前地理位置");
}
)
- 1.3 getCurrentPosition方法中的第三个参数可以省略,它是一些可选属性的列表,这些可选属性如下:
enableHighAccuracy:是否要求高精度的地理位置信息
timeout:对地理位置信息的获取操作做一个超时限制(单位为毫秒)
maximumAge:对地理位置信息进行缓存的有效时间(单位为毫秒)
对于这些可选属性的具体位置方法如下:
navigator.geolocation.getCurrentPositon(function(position){
},
function(error){
},
//以下为可选属性
{
//设置缓存有效时间为2分钟
maximumAge:60*1000*2,
//5秒钟内未获取到地理位置信息则返回错误
timeout:5000
)
2.持续监视当前地理位置的信息 watchCurrentPositon(onsuccess,onError,options)
该方法三个参数的说明与使用方法和getCurrentPosition方法的参数说明与使用方法相同。该方法返回一个数字,这个数字的使用方法与Javascript脚本中setInterval方法的返回参数的使用方法类似,可以被clearWath方法使用,停止对当前地理位置信息的监视。
3.停止获取当前用户的地理位置信息 clearWatch(watchId)
使用该方法可以停止对当前用户的地理信息的监视。该方法的参数为调用watchCurrentPosition方法监视地理位置信息时的返回参数。
- position对象
如果获取地理位置信息成功,则可以在获取成功后的回调函数中通过访问position对象的属性来得到这些地理位置信息。position对象具有如下这些属性:
latitude:当前地理位置的纬度。
longitude:当前地理位置的经度。
altitude:当前地理位置的海拔高度(不能获取时为null)
accuracy:获取到的纬度或经度的精度
altitudeAccuracy:获取到的海拔高度的精度
heading:设备的前进方面。用面朝正北方向的顺时针旋转角度来表示(不能获取时为null)
speed:设备的前进速度
timestamp:获取地理位置信息时的时间。
下面用getCurrentPositon方法获取当前位置的地理信息
function showObject(obj, k) {
//递归显示object
if (!obj) {
return;
}
for (var i in obj) {
if (typeof(obj[i]) != "object" || obj[i] == null) {
for (var j = 0; j < k; j++){
document.write(' ');
}
document.write(i + " : " + obj[i] + "<br />");
} else {
document.write(i + " : " + "<br />");
showObject(obj[i],k+1);
}
}
}
function get_location(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(show_map,handle_error,{enableHighAccuracy:true,maximumAge:1000})
} else {
alert('你的浏览器不支持使用HTML 5来获取地理位置信息。');
}
}
function handle_error(err){
//错误处理
switch(err.code){
case 1:
alert('位置服务被拒绝');
break;
case 2:
alert('暂时获取不到位置信息');
break;
case 3:
alert('获取信息超时');
break;
default:
alert('未知错误');
break;
}
}
function show_map(position){
//显示地理信息
var latitude = position.coords.latitude;
var longititude = position.coords.longititude;
showObject(position,0);
}
get_location();
HTML5 获取地理位置信息的更多相关文章
- html5获取地理位置信息API
html5获取地理位置信息API 在HTML5中,可以看下如何使用Geolocation API来获得用户的地理位置信息,如果该浏览器支持的话,且设备具有定位功能,就能够直接使用这组API来获取当前位 ...
- HTML5获取地理位置信息
<!DOCTYPE html> <html> <head> <title>Location</title> <meta charset ...
- HTML5获取地理位置信息并在Google Maps上显示
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- jQuery Mobile + HTML5 获取地理位置信息
这个代码也非常简单,核心是HTML5中GeoLocation API,函数原型定义如下: void getCurrentPosition(in PositionCallback successCa ...
- Html5 Geolocation获取地理位置信息
Html5中提供了地理位置信息的API,通过浏览器来获取用户当前位置.基于此特性可以开发基于位置的服务应用.在获取地理位置信息前,首先浏览器都会向用户询问是否愿意共享其位置信息,待用户同意后才能使用. ...
- Html5 Geolocation获取地理位置信息(转)
Html5中提供了地理位置信息的API,通过浏览器来获取用户当前位置.基于此特性可以开发基于位置的服务应用.在获取地理位置信息前,首先浏览器都会向用户询问是否愿意共享其位置信息,待用户同意后才能使用. ...
- AngularJS进阶(二十)HTML5实现获取地理位置信息并定位功能
HTML5实现获取地理位置信息并定位功能 注:请点击此处进行充电! 前言 这篇文章主要介绍了HTML5实现获取地理位置信息并定位功能,本文讲解了原生HTML5.百度地图.谷歌地图等三种获取理位置信息并 ...
- html5实现获取地理位置信息并定位
这里主要讲h5实现获取地理位置信息并定位功能,本文讲解了原生h5,百度地图,谷歌地图等三种获取地理信息并定位的方法,需要的朋友可以参考下: h5提供了地理位置功能(Geolocation API),能 ...
- 【Demo】HTML5获取地理位置
HTML5获取地理位置简单实例 实例1--获取地理位置的经纬度: <!DOCTYPE html> <html> <head> <meta charset=& ...
随机推荐
- javascript的canvas绘图的基本用法
<canvas>是HTML里面非常强大的元素,利用它结合js可以实现很多动画效果,大大增强交互性.下面,我想用图文并茂的方式阐述一下canvas的绘图机制的基础内容,话不多说,先上代码: ...
- Powershell 切换IE代理
买了一个穿越防火墙的代理,在 Windows 下每次手动设置代理都好麻烦,最后不断尝试 Powershell 来设置,最后也终于成功了. 其实利用 Powershell 来设置 IE 的代理,就是 ...
- ExtJs4 基础必备
认识ExtJs的开发包 下载路径:http://www.sencha.com/products/extjs/download/ 解压有20多兆,别怕,真正运行的没这么大.认识下这个包的文件结构吧. b ...
- Android 文件读写
一.分类 文件读写作为Android四大数据存储方式之一,又分为内部存储和外部存储两种: (1)内部存储(Internal storage): 总是可用. 文件默认情况存储在/data/data/包名 ...
- Android 之 ProgressDialog用法介绍
布局文件测试: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" androi ...
- 连接第二个 insance 到 first_local_net - 每天5分钟玩转 OpenStack(83)
上一节在 first_local_net 中已经部署了 cirros-vm1,今天将再部署一个instance,并验证两个 instance 的连通性. 以同样的方式 launch instance ...
- 门外汉的IT
作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 计算机很早就走入了我的生活.小学时,家里放一台联想“天琴”的电脑.它霸气的音箱造型 ...
- 站在巨人的肩膀上---重新自定义 android- ExpandableListView 收缩类,实现列表的可收缩扩展
距离上次更新博客,时隔略长,诸事繁琐,赶在去广州答辩之前,分享下安卓 android 中的一个 列表收缩 类---ExpandableListView 先上效果图: 如果想直接看实现此页面的代码请下滑 ...
- 重温JSP学习笔记--El函数库
EL函数库(由JSTL提供的) * 导入标签库:<%@ tablib prefix="fn" uri="http://java.sun.com/jsp/jstl/f ...
- 优化JS加载时间过长的一种思路
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 去年公司在漳州的一个项目中,现场工程人员反映地图部分出图有点 ...