【HTML5初探之Geolocation API】让我们获取女神的地址

导航

【初探HTML5之使用新标签布局】用html5布局我的博客页！

【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放

【HTML5初探之绘制图像（上）】看我canvas元素引领下一代web页面

【HTML5初探之绘制图像（下）】看我canvas元素引领下一代web页面

【HTML5初探之多媒体元素】视频播放HTML5、Flash谁才是王道？

【HTML5初探之本地存储】如果没有数据库。。。

【HTML5初探之离线应用】如何打造零请求、无流量的网站？

【HTML5初探之通信API】跨域门槛不再高、数据推送不是梦

【HTML5初探之Web Workers】网页也能多线程

【HTML5初探之Geolocation API】让我们来回去地理信息

 

前言

从最开始学习HTML5到今天刚刚一个星期，明天还可以玩一天呢！

15号我意识到自己确实无法忍受自己死寂的工作生活了，若是听之任之，自己必然废之，你们一定明白那种感觉的，

每天都会非常有压力的想进步，每天都会想看书，但是每天却贪生怕死的玩游戏，看网页，看电影如此荒废岁月。

那天下午，我落寞的看着屏幕，在屏幕中看见了我空洞寂寞的脸，于是我想到了改变。

一直到今天我深刻的感觉到了自己的变化，若是照此下去，我的理想没准真的能实现呢！

好吧，希望自己好好的坚持下去，用21天形成一个习惯，用行动改变自己的人生吧！

Geolocation API

在HTML5中为window.navigation新增了一个geolocation属性，可以通过getCurrentPosition获取到当前地理位置信息：

复制代码

navigation.geolocation.getCurrentPosition(

function (position) {}, 

function (error) {},

opts

);

第一与第二个都是函数，一个用于成功时一个用于失败时调用；

其中第二个函数的错误码为：

1 用户拒绝位置服务

2 获取不到位置信息

3 获取信息超时

第三个参数为一可选属性列表（js对象）

1 enableHighAccuracy 要求高精度信息

2 timeout 设置超时时间

3 maximumAge 数据信息过期时间

复制代码

使用watchPosition方法可持续获取用户当前位置信息：

int watchCurrentPosition(onSucc, onError, opts)

与上面的方法参数一致

我们这里详细说说调用成功后返回的position对象：

复制代码

该对象具有以下信息：

1 latitude 纬度

2 longitude 经度

3 altitude 海拔高度

4 accuracy 获取经度纬度（米）

5 altitudeAccurancy 获取海拔（米）

6 heading 设备朝向

7 speed 前进速度

8 timestamp 获取地理位置信息时的时间戳

复制代码

说干就干，我们来试试：

获取地理信息

还真获取到了的说！！！

地理位置是敏感信息机密数据，大家使用时要谨慎！！！

无图无真相，与强大的google结合使用，与google地图结合使用：

在地图上显示

注意：我在这里一直报个错，

TypeError: google.maps.LatLng is not a constructor

 这个错错的我都无语了。。。。搞了很久找不到答案，哪位大侠知道告知我一下！！！

结语

 原来一直舍不得学习HTML5，这次却一个星期大概学完了，不敢说什么都会，但是基本都有个印象了，不会像原来那么没底了。

好了，我继续找那个问题去了。

本文转自叶小钗博客园博客，原文链接：http://www.cnblogs.com/yexiaochai/archive/2013/04/20/3033049.html，如需转载请自行联系原作者