【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,如需转载请自行联系原作者
相关文章
|
6天前
|
缓存 API 定位技术
使用Python调用百度地图API实现地址查询
使用Python调用百度地图API实现地址查询
136 0
|
6天前
|
存储 JavaScript 前端开发
HTML API
HTML API
27 3
|
6天前
|
移动开发 前端开发 API
HTML5 Canvas 提供丰富的绘图API,支持绘制图形、文本、渐变和图像,助力游戏开发
【5月更文挑战第13天】HTML5 Canvas 提供丰富的绘图API,支持绘制图形、文本、渐变和图像,助力游戏开发。关键功能包括绘制基本形状、文本渲染、图像处理及渐变图案。在游戏开发中,Canvas用于绘制游戏元素、实现动画效果、精确的物理碰撞检测,并具有跨平台兼容性,为创造多样化视觉体验和互动游戏提供强大工具。随着技术进步,Canvas在游戏领域的应用将持续增长。
15 4
|
6天前
|
移动开发 API UED
【专栏:HTML进阶篇】HTML5拖放API与触摸事件
【4月更文挑战第30天】HTML5的拖放API和触摸事件增强了网页交互设计,使开发者能创建动态响应式界面。拖放API通过设定元素的`draggable`属性、监听拖动和放置事件以及处理`DataTransfer`对象实现。触摸事件如`touchstart`、`touchmove`、`touchend`则让触控设备操作更流畅。开发者需注意事件对象、多点触控处理和防止默认行为。结合两者,可创建图片排序、手势识别等交互功能,但也需面对浏览器兼容性和复杂逻辑挑战。利用HTML5这些工具,能提升用户体验,推动网页交互设计创新。
|
6天前
|
移动开发 前端开发 API
简述HTML5 Canvas的基本绘图API及其在游戏开发中的作用。
HTML5 Canvas 提供丰富的绘图API,用于在网页上绘制图形、动画和视觉效果,支持基本形状、文本、渐变、图像及像素操作。在游戏开发中,Canvas API用于绘制游戏元素、实现动画效果、进行物理碰撞检测,并具备跨平台兼容性,为创新游戏体验提供强有力的支持。
14 1
|
6天前
|
JavaScript
【HTML特效程序】① 给女神表白的程序(让女神看科技烟花),输入名字自动生成表白二维码
【HTML特效程序】① 给女神表白的程序(让女神看科技烟花),输入名字自动生成表白二维码
21 0
|
6天前
|
移动开发 API HTML5
HTML5响应式自动采集API壁纸系统源码自适应手机端
HTML5响应式自动采集API壁纸系统源码自适应手机端
44 11
HTML5响应式自动采集API壁纸系统源码自适应手机端
|
6天前
|
JavaScript 前端开发 API
在vue中如何获取项目src外层的config目录以及api接口proxy的target代理地址
在vue中如何获取项目src外层的config目录以及api接口proxy的target代理地址
27 0
|
6天前
|
移动开发 HTML5
HTML5/CSS3粒子效果进度条代码
HTML5/CSS3进度条应用。这款进度条插件在播放进度过程中出现粒子效果,就像一些小颗粒从进度条上散落下来
19 0
HTML5/CSS3粒子效果进度条代码

热门文章

最新文章