织梦CMS - 轻松建站从此开始!

澳奇眼镜道具厂_丹阳国际眼镜城平台

当前位置: 主页 > 网页基础 >

HTML5新功能Geolocation构建基于地理位置的Web应用

时间:2021-07-08 07:21来源: 作者: 点击:
然后将讨论 HTML5 地理定位数据的隐私问题,以及浏览器如何使用这些数据。最后本文将探讨它在实际中的应用,演示并让您学会如何使用它构建一个实用的基于地理位置的 Web 应用。
然后将讨论 HTML5 地理定位数据的隐私问题,以及浏览器如何使用这些数据。最后本文将探讨它在实际中的应用,演示并让您学会如何使用它构建一个实用的基于地理位置的 Web 应用。
HTML5 中的新功能
HTML5 是最新一代的 HTML 规范,是 W3C 与 WHATWG 合作的结果,目前仍外于开发中。自从上一代 HTML4,Web 世界已经发生了巨大的变化,HTML5 的到来更大地促进了 Web 的发展,HTML5 提供了很多新的功能,主要有:
  • 新的 HTML 元素,例如 section, nav, header, footer, article 等
  • 用于绘画的 Canvas 元素
  • 用于多媒体播放的 video 和 audio 元素
  • 用于定位的 Geolocation API
  • 本地存储以及离线应用
  • Web Workers API
本文主要对 HTML5 用于定位的 Geolocation 功能进行讲解,并提供实例,介绍它在实际中的应用。
位置信息
在 HTML5 中,当请求一个位置信息时,如果用户同意,浏览器就会返回位置信息,该位置信息是通过支持地理定位功能的底层设备(比如笔记本电脑或手机)提供给浏览器 的。位置信息由纬度、经度坐标和一些其他元数据组成。例如北京故宫的位置信息主要由一对纬度和经度坐标组成:纬度:北纬 39.9,经度:东经 116.4。
经纬度坐标有两种表示方式:十进制格式(例如 39.9)和 DMS(Degree Minute Second,角度)格式(例如 39 ° 54 ′ 20 ″)。HTML5 Geolocation API 返回的坐标格式为十进制格式。除了纬度和经度坐标,HTML5 Geolocation 还提供位置坐标的准确度。除此之外,它还会提供其他一些元数据,比如海拔、海拔准确度、行驶方向和速度等,具体情况取决于浏览器所在的硬件设备。
位置信息一般从如下数据源获得:
  • IP 地址
  • 三维坐标
    • GPS(Global Positioning System,全球定位系统)
    • Wi-Fi
    • 手机信号
  • 用户自定义数据
它们各有优缺点如表 1 所示,为了保证更高的准确度,许多设备使用多个数据源组合的方式。
表 1. 位置信息获取方式对比
数据源 优点 缺点
IP 地址 任何地方都可用
服务器端处理
不精确(经常出错,一般精确到城市级)
运算代价大
GPS 很精确 定位时间长,耗电量大
室内效果差
需要额外硬件设备支持
Wi-Fi 精确
可在室内使用
简单、快捷
在乡村这些 Wi-Fi 接入点少的地区无法使用
手机信号 相当准确
可在室内使用
简单、快捷
需要能够访问手机或其 modem 设备
用户自定义 可获得比程序定位服务更准确的位置数据
用户自行输入可能比自动检测更快
可能很不准确,特别是当用户位置变更后
浏览器支持情况
各浏览器对 HTML5 Geolocation 的支持程度不同,并且还在不断更新中。好消息是:在 HTML5 的所有功能中,HTML5 Geolocation 是第一批被全部接受和实现的功能之一,相关规范已经达到一个非常成熟的阶段,不大可能做太大改变。如表 2 所示,很多浏览器已经支持 HTML5 Geolocation:
表 2. 浏览器对 HTML5 Geolocation 的支持情况
浏览器 支持情况
Firefox 3.5 及以上版本支持
Chrome 在带有 Gears 的第 2 版 Chrome 中被支持
Internet Explorer 通过 Gears 插件支持
Opera 在版本 10 中支持
Safari 在版本 4 中支持以实现在 iPhone 上可用
由于浏览器对它的支持程度不同,在使用之前最好先检查浏览器是否支持 HTML5 Geolocation API。后面将讲解如何检查浏览器是否支持此功能。本文中所有示例程序都在 Firefox 12.0 上运行测试成功。

(责任编辑:admin)
织梦二维码生成器
顶一下
(1)
100%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
栏目列表
推荐内容