定位及地理位置信息是LBS应用的核心,和定位功能有所不同的是地理位置信息更关注如何得到有意义的信息。(例如一条街道的地址)
     从这边文章里你会学到HTML5地理位置信息的各种功能。它能提供从用户具体的位置到路径导航的多种用途。
     通过IP地址、手机和基站间的无线通讯、 GPS定位,有很多种方式可以知道你在哪里。不过现在通过获取客户IP地址来定位的好日子已经一去不复返了。
     HTML5有一套API可以允许客户设备使用javascript有效的获取地理位置信息(需iphone3/android2.0以上,或者使用桌面浏览器)。
     地理位置API支持下面的浏览器及手机:
    • Google Chrome 5.0
    • Internet Explorer 9.0
    • Firefox 3.5
    • Safari 5.0
    • Opera 16.0
    • Iphone 3.0
    • Android 2.0
    • Opera Mobile 10
    • Blackberry OS 6.0
安全性和精度
       当需共享地理位置给远程服务器时,浏览器会通过弹出框或显示到浏览器顶端的提示信息来要求您的授权,智能手机会在安装相关APP时进行提示。
          

 
     上面的infobar弹出框为非模态,在选择其他浏览页面后会消失。没有方法可以绕过这种要求授权的infobar,infobar的这种特性保证了只有经过你的授权浏览器才可以共享位置信息。作为客户来说可以了解到,
  • 被告知哪个网站想获取你的地址位置
  • 可以选择共享或不共享
  • 可保存针对此选项的默认选择,该网站的类似提示不会再出现
     有多种技术可用于获取用户的位置,每种技术有不同的精确度。桌面浏览器可能会使用WIFI(精确度20米)或者IP来定位(只能精确到城市级别且可能会有误报)。移动设备倾向于使用三角定位技术例如GPS(精确
度10米仅限户外)、WIFI和GSM/CDMA(精确度1000米)。
     天气窗件
     下面这个例子使用了HTML地址位置API及OpenWeather API。该例子在页面展示部分比较简单,也没有充分使用到OpenWeather API的全部功能。现在是这个窗件的截图:

 
 
     从html部分开始。html引用了第三方的javascript和CSS,在页面初始化阶段调用了javascript方法getLocation如下:   

 
     使用了不同CSS style的table:
     

 
     在table里面使用了div,随后可以使用javascript覆写:

 
     随后使用免费的OpenWeather API获取Jason格式的天气信息并展示出来。下面定义了一些全局变量,包括获取获取当前天气、随后5天天气预测、及图片的静态URL。
     

 
     在getLocation方法里面需判断当前浏览器是否支持获取地理位置API,

 
     如浏览器不支持则会显示如下的信息,
     

 
     Geolocation API提供两种方法获取用户的地址位置信息,getCurrentPosition和watchPosition。随后会简短讨论一下两个方法的不同之处。两个方法都会立即返回,然后使用异步的方式尝试获取用户的位置。且两者都使用相同数量的参数:
 
  1. successCallback - 方法成功返回时调用,如下图的getCurrentWeatherData方法。
  2. errorCallback - 出现错误时调用,如下的displayError方法。
  3. 可选 - 一些可选参数,
     a. enableHighAccuracy - 默认值为false。该参数设置为true时响应时间会变慢。如果是在移动设备使用的话会使用GPS,同时导致耗电量增加。
     b. timeout - 默认为0,表示为无限制。用来指定等待响应的最大时间。这里我们设置timeout时间如下:
 

 
     c.maximumAge - 单位毫秒默认值为0。用来指定应用所能接受的缓存位置信息的最长时间。0表示获取立即获取新的位置信息。
 

 
     在errorCallback方法里,我们使用错误代码对应相应的错误信息:
 
     

 
     摘要描述一下以上步骤:
 
  • 判断是否支持获取地理位置信息API。
  • 如果支持的话,调用getCurrentPosition方法,否则调用errorcallback方法。
  • 如果getCurrentPosition方法调用成功,则返回结果被指定的方法进行处理。(getCurrentWeatherData)
  • getCurrentWeatherData方法对返回结果postion对象进行进一步处理。
     getCurrentPosition和watchPosition
     watchPosition方法在位置改变时会进行通知。这在一些位置驱动的Apps里面非常有用,可以用来跟踪用户的移动轨迹。而getCurrentPostion则为一次性返回。watchPosition方法会返回watchId,当不需要进行持续的位置更新时可调用clearWatch方法。
     
     Position
 
     上文提到的Position对象包含以下属性:
     

 
     调用OpenWeather API的URL使用Position对象的相关属性如下:
 

 
     我们使用XMLHttpRequest对象和OpenWeather服务器进行数据交换。当请求数据发送后,我们希望根据响应执行一些操作。onreadystatechange事件在XMLHttpRequest对象的readyState属性每次改变后都会被触发,定义在该事件上的方法会被自动调用。如下是readyState属性的值列表:
 
     0: request not initialized
     1: server connection established
     2: request received
     3: processing request
     4: request finished and response is ready
 
     state属性返回“200”表示OK,“404”表示页面没有找到。当readyState值为4且state的值为200时,表示响应正确返回。解析返回的responseText对象为Json对象,随后调用Parse方法解析Json对象转换成要显示的内容。
 

 
     现在可以使用XMLHttpRequest对象的open及send方法了:
     

 
     处理Json对象
 
     可使用Json.parse方法解析并通过“.”或“[]”访问Json对象。Json和XML相似的地方是它是自描述的、分层并通过使用XmlHttpRequest获取,可以使用多种语言进行解析。和XML不同的地方是,Json不需要使用Xml解析器进行解析,直接使用javascript即可。Json数据为名字/值对格式,通过逗号分隔。使用大括号分隔对象,并使用中括号来保存数组。下面是一个从OpenWeather API返回的Json对象的例子:
 

 
       如下展示了如何使用Json对象展示返回的天气信息:
 

 

天气窗件展示 -一个HTML5 地理位置应用的例子的更多相关文章

  1. 用Phaser来制作一个html5游戏——flappy bird (一)

    Phaser是一个简单易用且功能强大的html5游戏框架,利用它可以很轻松的开发出一个html5游戏.在这篇文章中我就教大家如何用Phaser来制作一个前段时间很火爆的游戏:Flappy Bird,希 ...

  2. iOS开发UI篇—使用picker View控件完成一个简单的选餐应用

    iOS开发UI篇—使用picker View控件完成一个简单的选餐应用 一.实现效果 说明:点击随机按钮,能够自动选取,下方数据自动刷新. 二.实现思路 1.picker view的有默认高度为162 ...

  3. Windows程序==>>使用ListView控件展示数据

    使用ListView控件展示数据 01.ImageList控件 1.了解了解         属性 说明 Images 储存在图像列表中的所有图像 ImageSize 图像列表中图像的大小 Trans ...

  4. [Javascript] HTML5 地理位置定位(HTML5 Geolocation)原理及应用

    地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个 ...

  5. HTML5 地理位置定位API(1)

    地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个 ...

  6. HTML5 地理位置定位(HTML5 Geolocation)原理及应用

    地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个 ...

  7. 用Phaser来制作一个html5游戏——flappy bird (二)

    在上一篇教程中我们完成了boot.preload.menu这三个state的制作,下面我们就要进入本游戏最核心的一个state的制作了.play这个state的代码比较多,我不会一一进行说明,只会把一 ...

  8. 注意Android里TextView控件的一个小坑,用android:theme来设置样式时动态载入的layout会丢失该样式

    注意Android里TextView控件的一个小坑,用android:theme来设置样式时动态载入的layout会丢失该样式 这个坑,必须要注意呀, 比如在用ListView的时候,如果在List_ ...

  9. 一个html5开发工具

    今天推荐一个Html5开发工具 sublimetext3 找了一个注册码 可用 —– BEGIN LICENSE —– Michael Barnes Single User License EA7E- ...

随机推荐

  1. 记录Jenkins+gitlab+maven

    摘要 昨天抽空将jenkins+gitlab(git)+maven整合了一下,再次记录一下以防下次再去查找省的麻烦. git.maven.java配置 启动jenkins之后进入系统管理里面的Glob ...

  2. unity上传app store遇到的一些问题

    记录ios发布时遇到的一些问题 注:如果你是用mac开发,那就在Unity里直接BuildAndRun就直接可以导到XCode里,如果是win,那就先打包成ios包,在传导Xcode里打开,不过可能会 ...

  3. 3. Python3 基本数据类型

    Python3 基本数据类型 Python 中的变量不需要声明.每个变量在使用前都必须赋值,变量赋值以后该变量才会被创建. 在 Python 中,变量就是变量,它没有类型,我们所说的"类型& ...

  4. thinkphp在wamp 配置去掉url中index.php方法

    http://blog.csdn.net/youmypig/article/details/45008971

  5. 新手上路 git你好

    天哪,虽然我是一个学计算机的,但是我发现我的计算机学的真是……好吧不说了,言归正传.​ 这几天一直在着手于git,可能只是学了一个皮毛,结果也是不大尽人意,跟着别人学了学,鼓捣了鼓捣,还是有点小小的收 ...

  6. 团队项目作业五 - 旅游行业App分析

    随着经济的发展,不论是在工作中的男女老少,还是在校园中的童鞋,都喜欢在假期来一场说走就走的旅行,来缓解生活中的各种压力.当然,在国家面临经济转型的情况下,更多的将工业,农业转向服务型的旅游业,各个省市 ...

  7. [转帖] Linux 下面 Find的使用...--- 自己不会用 find

    13个实用的Linux find命令示例  原始博客地址:  https://www.cnblogs.com/chenshoubiao/p/4838089.html   之前只会用locate  基础 ...

  8. 【转帖】 redis 命令 From https://www.cnblogs.com/zhouweidong/p/7550717.html

    redis命令详解   redis中添加key value元素:set key value;       获取元素:get key ;   redis中添加集合:lpush key value1 va ...

  9. 【bzoj5073】[Lydsy1710月赛]小A的咒语 后缀数组+倍增RMQ+贪心+dp

    题目描述 给出 $A$ 串和 $B$ 串,从 $A$ 串中选出至多 $x$ 个互不重合的段,使得它们按照原顺序拼接后能够得到 $B$ 串.求是否可行.多组数据. $T\le 10$ ,$|A|,|B| ...

  10. BZOJ2744 HEOI2012朋友圈(二分图匹配)

    先考虑B国.容易发现a xor b mod 2=0即二进制末位相同,那么可以据此将所有人分成两部分,每一部分各自是一个完全图.然后再将a or b有奇数个1的边连上,现在需要求的就是这样一个图里的最大 ...