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('&nbsp;&nbsp;&nbsp;&nbsp;');
}
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 获取地理位置信息的更多相关文章

  1. html5获取地理位置信息API

    html5获取地理位置信息API 在HTML5中,可以看下如何使用Geolocation API来获得用户的地理位置信息,如果该浏览器支持的话,且设备具有定位功能,就能够直接使用这组API来获取当前位 ...

  2. HTML5获取地理位置信息

    <!DOCTYPE html> <html> <head> <title>Location</title> <meta charset ...

  3. HTML5获取地理位置信息并在Google Maps上显示

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  4. jQuery Mobile + HTML5 获取地理位置信息

      这个代码也非常简单,核心是HTML5中GeoLocation API,函数原型定义如下: void getCurrentPosition(in PositionCallback successCa ...

  5. Html5 Geolocation获取地理位置信息

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

  6. Html5 Geolocation获取地理位置信息(转)

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

  7. AngularJS进阶(二十)HTML5实现获取地理位置信息并定位功能

    HTML5实现获取地理位置信息并定位功能 注:请点击此处进行充电! 前言 这篇文章主要介绍了HTML5实现获取地理位置信息并定位功能,本文讲解了原生HTML5.百度地图.谷歌地图等三种获取理位置信息并 ...

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

    这里主要讲h5实现获取地理位置信息并定位功能,本文讲解了原生h5,百度地图,谷歌地图等三种获取地理信息并定位的方法,需要的朋友可以参考下: h5提供了地理位置功能(Geolocation API),能 ...

  9. 【Demo】HTML5获取地理位置

    HTML5获取地理位置简单实例 实例1--获取地理位置的经纬度: <!DOCTYPE html> <html> <head>  <meta charset=& ...

随机推荐

  1. SSIS 数据类型和类型转换

    在进行ETL开发时,数据类型(Data Type)是最基础的,但也容易被忽略,楼主使用的SQL Server 版本是2012,用此博文记录,常用的SSIS数据类型和TSQL数据类型的映射.SSIS的数 ...

  2. Android 开源框架Universal-Image-Loader完全解析(一)--- 基本介绍及使用

    转载博客:http://blog.csdn.net/xiaanming/article/details/26810303 大家好!差不多两个来月没有写文章了,前段时间也是在忙换工作的事,准备笔试面试什 ...

  3. N个数依次入栈,出栈顺序有多少种?

    对于每一个数来说,必须进栈一次.出栈一次.我们把进栈设为状态‘1’,出栈设为状态‘0’.n个数的所有状态对应n个1和n个0组成的2n位二进制数.由于等待入栈的操作数按照1‥n的顺序排列.入栈的操作数b ...

  4. .Net 转战 Android 4.4 日常笔记(3)--目录结构分析

    看了创建项目后,出现的文件夹很多确实有点晕,不过经过简单的了解还是跟我们asp.net的目录有点相识滴. 下面这张图,概括了主要的文件用途.其实也只需要了解这几个就差不多了,知道在那里设计界面,那里写 ...

  5. AngularJS之Dependency Injection(五)

    前言 这一节我们来讲讲AngularJS中的依赖注入,在实际开发中Angular提供了具体的方法供我们去调用,但是一旦业务不能满足要求或者出现麻烦或者错误时导致无从下手,所以基于此我们有必要深入一点去 ...

  6. 跟着9张思维导图学习Javascript

    学习的道路就是要不断的总结归纳,好记性不如烂笔头,so,下面将 po 出我收集的 9 张 javascript 相关的思维导图(非原创). 思维导图小tips: 思维导图又叫心智图,是表达发射性思维的 ...

  7. Html,Css,Dom,javascript细节总结

    最近愈发觉得基础的重要性,细节决定成败,所以希望能够将自己注意到的搜集到的一些关于前端的小细节小知识整理出来,更好的方便自己记忆回顾. 1.在构建网页Html框架时,尽量只给外层标记(即是父标记)定义 ...

  8. 给Easyui combobox设定默认值

          今天做到那个北理工二期的项目,里面刚好有几个dialog需要弄一个默认值,一般是选择启用与否,但是,为了方便用户,最好有一个默认值,所以,增加一个默认值的属性.代码入下: JS代码:   ...

  9. MySQL密码忘记,怎么办?

    如果哪天你忘记了线上MySQL数据库的root密码,怎么办? 大家往往会想到skip-grant-tables参数,具体步骤如下: 1. 关闭MySQL数据库,因为root密码忘记了,mysqladm ...

  10. MySQL分区表的管理~2

    一.维护分区 对于表的维护,我们一般有如下几种方式: CHECK TABLE, OPTIMIZE TABLE, ANALYZE TABLE和REPAIR TABLE. 而这几种方式,对于分区同样适用. ...