简述
最近在苦逼学习 JavaScript, 并且是有任务需要去完成的, 因此就有一个想法要总结记录一下自己的学习成果. 这次的总结主题是 html5 实现定位地理位置的任务, 结合原生的 JavaScript 实现此功能.
html5
什么是 html5?
万维网的核心语言, 标准通用标记语言下的一个应用超文本标记语言 (HTML) 的第五次重大修改版本, 2014 年 10 月 29 日, 万维网联盟宣布, 经过接近 8 年的艰苦努力, 该标准规范终于制定完成, 命名为 html5.
HTML5 草案的前身名为 web Applications1.0, 于 2004 年被 WHATWG 提出, 于 2007 年被 W3C 接纳, 并成立了新的 HTML 工作团队. HTML 5 的第一份正式草案已于 2008 年 1 月 22 日公布.
HTML5 仍处于完善之中. 然而, 大部分现代浏览器已经具备了某些 HTML5 支持. 2012 年 12 月 17 日, 万维网联盟 (W3C) 正式宣布凝结了大量网络工作者心血的 HTML5 规范已经正式定稿. 根据 W3C 的发言稿称:"HTML5 是开放的 Web 网络平台的奠基石."
html5 有什么特点和优势?
支持 Html5 的浏览器包括 Firefox(火狐浏览器),IE9 及其更高版本, Chrome(谷歌浏览器),Safari,Opera 等; 国内的遨游浏览器 (Maxthon), 以及基于 IE 或 Chromium(Chrome 的工程版或称实验版) 所推出的 360 浏览器, 搜狗浏览器, QQ 浏览器, 猎豹浏览器等国产浏览器同样具备支持 HTML5 的能力.
HTML5 手机应用的最大优势就是可以在网页上直接调试和修改.
HTML5 的设计目的是为了在移动设备上支持多媒体. 新的语法特征被引进以支持这一点, 如 video,audio 和 canvas 标记. HTML5 还引进了新的功能, 可以真正改变用户与文档的交互方式.
HTML 能做什么?
移动 Web
手机 App
更好的 PC 站点优化
html5 - 地理位置定位技术
这里是我在我的 demo 下的实现思路, 你大可作为参考也可以指正一下我的思路的问题, 谢谢.
地理位置 (Geolocation) 是 HTML5 的重要特性之一, 提供了确定用户位置的功能, 借助这个特性能够开发基于位置信息的应用. 在我的 demo 中使用的是百度提供的 API 接口, 调用 html5 的 geolocation 方法获取客户端当前经纬度, 从而获得客户端所在的地理位置, 包括省市区信息, 甚至有街道, 门牌号等详细的地理位置信息.
值得注意的一点是, PC 很多浏览器对于 html5 的定位技术是不太友好的, 很多浏览器都是默认拒绝定位, 一般只有 IE 是可以正常使用, 但是获取到的经纬度偏差很大(这个原因很可能是因为 PC 的定位获取客户机位置的时候不是当前电脑的位置, 而可能是浏览器调用服务器的物理机器的位置, 不知道这个原因); 相反在手机访问的时候, 由于一般手机上都有 GPS 模块, 所以定位效果会好很多, 原因就在于手机上的 GPS 模块对 geolocation 特性的支持是很好的. 最终的结论是, html5 的定位在手机上测试是最佳的选择, PC 建议使用 IE 浏览器.
具体实现方案
好了, 废话不多说(其实已经说了很多), 立马进入实战阶段.
- function getLocation() {
- var options = {
- enableHighAccuracy : true,
- maximumAge : 1000
- }
- alert('this is getLocation()');
- if (navigator.geolocation) {
- // 浏览器支持 geolocation
- navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
- } else {
- // 浏览器不支持 geolocation
- alert('您的浏览器不支持地理位置定位');
- }
- }
这里我写了一个方法, 主要功能是在调用 html5 的 geolocation()前, 先判断当前浏览器是否支持 html5, 这个判断基本在很多 PC 浏览器都会让程序挂掉(原因就是 PC 绝大部分浏览器不支持或者拒绝 html5 定位).
如果浏览器支持, 那么程序就会调用 geolocation 方法了, 这是方法里面有 2 个回调函数: 一个是定位成功后的处理操作(一般程序会返回经纬度给你进行后续的定位数据处理), 另外一个是定位失败后的处理操作(具体大概就是错误信息, 然后就是你的定位失败后的后续操作), 第三个参数很少用到, 我自己也没有去关注它有什么用, 各位看官有兴趣可以了解一下.
- // 成功时
- function onSuccess(position) {
- // 返回用户位置
- // 经度
- var longitude = position.coords.longitude;
- // 纬度
- var latitude = position.coords.latitude;
- alert('当前地址的经纬度: 经度' + longitude + ', 纬度' + latitude);
- // 根据经纬度获取地理位置, 不太准确, 获取城市区域还是可以的
- var map = new BMap.Map("allmap");
- var point = new BMap.Point(longitude, latitude);
- var gc = new BMap.Geocoder();
- gc.getLocation(point, function(rs) {
- var addComp = rs.addressComponents;
- alert(addComp.province + "," + addComp.city + ","+ addComp.district + "," + addComp.street + ","+ addComp.streetNumber);
- });
- postData(longitude, latitude);
- }
我这里写了一个成功后的回调函数, 第一步获取定位成功返回的经纬度数据, 然后结合百度那边提供的接口进行具体位置的转换, 最后我还有一个数据提交的方法, 这个是我具体业务的后续操作了, 你可以根据具体情况进行特殊处理. 下面附上百度接口:
- <script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>
- // 失败时
- function onError(error) {
- switch (error.code) {
- case 1:
- alert("位置服务被拒绝");
- break;
- case 2:
- alert("暂时获取不到位置信息");
- break;
- case 3:
- alert("获取信息超时");
- break;
- case 4:
- alert("未知错误");
- break;
- }
- // 经度
- var longitude = 23.1823780000;
- // 纬度
- var latitude = 113.4233310000;
- postData(longitude, latitude);
- }
紧接着就是定位失败的回调函数了, 这个就简单输出错误信息, 然后我也写了一个失败后的后续操作, 你可以根据你的需要进行自己的具体操作.
这样, 整个 html5 定位算是完成了, 不算太难, 但也不简单, 因为里面有很多可挖掘的空间, 比如定位精度, 定位范围, 还有具体的地图定位和导航扩展的后续开发, 可以说可扩展性很强, 难度也会逐步提升, 所以是一个值得研究的技术, 我的技术有限, 先研究到这里吧, 最后附上完整的代码.
完整 demo 代码
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <HTML lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
- <title>
- demo
- </title>
- </head>
- <body>
- </body>
- </HTML>
- <script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>
- <script type="text/javascript">
- function getLocation() {
- var options = {
- enableHighAccuracy : true,
- maximumAge : 1000
- }
- alert('this is getLocation()');
- if (navigator.geolocation) {
- // 浏览器支持 geolocation
- navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
- } else {
- // 浏览器不支持 geolocation
- alert('您的浏览器不支持地理位置定位');
- }
- }
- // 成功时
- function onSuccess(position) {
- // 返回用户位置
- // 经度
- var longitude = position.coords.longitude;
- // 纬度
- var latitude = position.coords.latitude;
- alert('当前地址的经纬度: 经度' + longitude + ', 纬度' + latitude);
- // 根据经纬度获取地理位置, 不太准确, 获取城市区域还是可以的
- var map = new BMap.Map("allmap");
- var point = new BMap.Point(longitude, latitude);
- var gc = new BMap.Geocoder();
- gc.getLocation(point, function(rs) {
- var addComp = rs.addressComponents;
- alert(addComp.province + "," + addComp.city + ","+ addComp.district + "," + addComp.street + ","+ addComp.streetNumber);
- });
- // 这里后面可以写你的后续操作了
- postData(longitude, latitude);
- }
- // 失败时
- function onError(error) {
- switch (error.code) {
- case 1:
- alert("位置服务被拒绝");
- break;
- case 2:
- alert("暂时获取不到位置信息");
- break;
- case 3:
- alert("获取信息超时");
- break;
- case 4:
- alert("未知错误");
- break;
- }
- // 这里后面可以写你的后续操作了
- // 经度
- var longitude = 23.1823780000;
- // 纬度
- var latitude = 113.4233310000;
- postData(longitude, latitude);
- }
- // 页面载入时请求获取当前地理位置
- Windows.onload = function(){
- // html5 获取地理位置
- getLocation();
- };
- </script>
总结
html5 定位技术的扩展性很强, 技术应用范围很广, 也是很有价值的一门技术, 值得研究.
geolocation 的两个回调函数有很多想象空间, 值得我们深思研究.
对于我来说, 我算是收获一门技能, 在手机定位上的一个技术.
来源: http://www.bubuko.com/infodetail-3498746.html