文档章节

Javascript学习总结@html5实现定位地理位置

RongX
 RongX
发布于 2015/11/25 23:58
字数 2162
阅读 2033
收藏 11
点赞 0
评论 0

简述

最近在苦逼学习Javascript,并且是有任务需要去完成的,因此就有一个想法要总结记录一下自己的学习成果。这次的总结主题是html5实现定位地理位置的任务,结合原生的Javascript实现此功能。

html5

1. 什么是html5?

  • 万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改版本,2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,该标准规范终于制定完成,命名为html5。

  • HTML5草案的前身名为 Web Applications 1.0,于2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的
    HTML 工作团队。HTML 5 的第一份正式草案已于2008年1月22日公布。

  • HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5
    支持。2012年12月17日,万维网联盟(W3C)正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称:“HTML5是开放的Web网络平台的奠基石。”

2. html5有什么特点和优势?

  • 支持Html5的浏览器包括Firefox(火狐浏览器),IE9及其更高版本,Chrome(谷歌浏览器),Safari,Opera等;国内的遨游浏览器(Maxthon),以及基于IE或Chromium(Chrome的工程版或称实验版)所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。

  • HTML5手机应用的最大优势就是可以在网页上直接调试和修改。

  • HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点,如video、audio和canvas
    标记。HTML5还引进了新的功能,可以真正改变用户与文档的交互方式。

3.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> <!--头部模块 end--> <script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script> <script type="text/javascript" > // ======================================= html定位地理位置 开始 ================================================= 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);
} // ======================================= html定位地理位置 结束 ================================================= // =============================== 业务逻辑 开始 ================================= // 页面载入时请求获取当前地理位置 window.onload = function(){ // html5获取地理位置 getLocation();
}; // =============================== 业务逻辑 结束 ================================= </script>

总结

  • html5定位技术的扩展性很强,技术应用范围很广,也是很有价值的一门技术,值得研究。

  • geolocation的两个回调函数有很多想象空间,值得我们深思研究。

  • 对于我来说,我算是收获一门技能,在手机定位上的一个技术

© 著作权归作者所有

共有 人打赏支持
RongX
粉丝 1
博文 30
码字总数 36797
作品 0
广州
程序员
WebView!!!!日记~~

● Android设备多分辨率的问题 Android浏览器默认预览模式浏览 会缩小页面 WebView中则会以原始大小显示 Android浏览器和WebView默认为mdpi。hdpi相当于mdpi的1.5倍 ldpi相当于0.75倍 三种解...

Neo_
2012/11/01
0
0
面向移动设备的HTML5开发框架梳理

很久以前整理了篇将手机网站做成手机应用的JS框架。时隔一年多,很多新的技术已经出现,下面再来总结下还有哪些框架是适合面向手机设备的开发的。 1、jQuery Mobile jQuery Mobile 是 jQuery...

凯文加内特
2015/01/26
0
0
HTML5编程之旅 第1站 Geolocation

HTML5 Geolocation 初探 让我们假设这样一个场景,有一个web应用程序,它可以向用户提供附近不远处某商场的打折优惠信息。使用HTML5 Geolocation API(地理定位API),可以请求用户共享他们的...

倪伟伟
2014/02/24
0
0
娱乐开发两不误,10 大开源游戏框架推荐

从角色扮演游戏到即时策略游戏,从冒险解谜游戏到动作射击游戏,甚至是只有一兆大小的迷你游戏,都有起着核心作用的技术组成部分。本文将介绍十大好用的开源游戏引擎和框架,希望能给你的游戏...

编辑部的故事
2017/10/25
0
19
史无前例的 HTML5 资源参考指南

尽管 HTML5 规范在 2014 年之前不会有正式版本,很多设计师已经开始试水高级浏览器已经支持的部分 HTML5 功能。HTML5 为 Web 设计和应用开发打开了一扇全新的门,原生支持了以前只可能使用 ...

李长春
2012/03/02
0
1
HTML5 从基础学习之二 --Canvas Geolocation Cache

HTML5 的canvas元素使用JavaScript在网页上绘制图像 其拥有多种绘制路径,矩形,圆形,字符以及添加图像的方法。 1、Canvas元素的创建(规定元素的id,宽度和高度) <canvas id="myCanvas" ...

Drealin
2012/09/07
0
0
掌握这11项技能,你就是优秀的前端开发工程师

导读: 你也许会觉得前端开发是一个很简单的工作,对呀,你就是刚刚从网页设计转型过来的。但当你深入其中时,一定会发现好像前端开发不是那么简单,光网站性能优化、响应式、框架就让你焦头...

半饱即好
06/26
0
0
15本Web开发人员应该拥有的免费电子书籍

当今互联网已经成为每一个人的信息知识来源。假如你想学习任何事情,可以很容易在互联网上轻松找到相关的信息,即使它是很简单的事情。在互联网上有成千上万的教程和指南可以用来学习与工作相...

V
2011/07/10
0
0
掌握11项技能,你就是优秀的前端开发工程师

导读: 你也许会觉得前端开发是一个很简单的工作,对呀,你就是刚刚从网页设计转型过来的。但当你深入其中时,一定会发现好像前端开发不是那么简单,光网站性能优化、响应式、框架就让你焦头...

半饱即好
2014/05/14
0
25
基于HTML5技术的电力3D监控应用(二)

上篇介绍了我们电力项目的基本情况,我们选用HTML5技术还是顶着很大压力,毕竟HTML5技术性能行不行,浏览器兼容性会不会有问题,这些在项目选型阶段还是充满疑惑,项目做到现在终于快收尾了我...

xhload3d
2013/12/15
0
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Kafka设计解析(一)- Kafka背景及架构介绍

原创文章,转载请务必将下面这段话置于文章开头处。(已授权InfoQ中文站发布) 本文转发自技术世界,原文链接 http://www.jasongj.com/2015/03/10/KafkaColumn1 摘要   Kafka是由LinkedI...

mskk
10分钟前
0
0
使用Service Mesh整合您的微服务架构

在微服务架构的世界中,它正在达到这样的程度,即管理系统的复杂性对于利用它带来的好处变得至关重要。 目前,如何实现这些微服务不再是一个问题,因为有很多可用的框架(Spring Boot,Vert....

xiaomin0322
13分钟前
0
0
看看 LinkedList Java 9

终于迎来了 LinkedList 类,实现的接口就有点多了 Serializable, Cloneable, Iterable<E>, Collection<E>, Deque<E>, List<E>, Queue<E>。LinkedList是一个实现了List接口和Deque接口的双端链......

woshixin
32分钟前
0
0
算法 - 冒泡排序 C++

大家好,我是ChungZH。今天我给大家讲一下最基础的排序算法:冒泡排序(BubbleSort)。 冒泡排序算法的原理如下: 比较相邻的元素。如果第一个比第二个大(可以相反),就交换他们两个。 对每...

ChungZH
34分钟前
0
0
jquery ajax request payload和fromData请求方式

请求头的不同 fromData var data = { name : 'yiifaa'};// 提交数据$.ajax('app/', { method:'POST', // 将数据编码为表单模式 contentType:'application/x-ww...

lsy999
36分钟前
0
0
阿里P7架构师,带你点亮程序员蜕变之路

前言: Java是现阶段中国互联网公司中,覆盖度最广的研发语言。 掌握了Java技术体系,不管在成熟的大公司,快速发展的公司,还是创业阶段的公司,都能有立足之地。 有不少朋友问,成为Java架...

Java大蜗牛
38分钟前
1
0
Ecstore 在没有后台管理界面(维护)的情况如何更新表的字段

window 系统: 切换到:app\base 目录下: C:\Users\qimh>d: D:\>cd D:\WWW\huaqh\app\base 执行:D:\WWW\huaqh\app\base>cmd update linux 系统: 1># cd /alidata/www.novoeshop.com/app/......

qimh
42分钟前
0
0
设计模式-策略模式

策略模式 解释 对工厂模式的再次封装,使用参数控制上下文信息(将工厂返回的实例赋值给context field) 不会返回bean实例,只是设置对应的条件 调用context的方法(调用field的方法) 用户只...

郭里奥
45分钟前
0
0
python使用有序字典

python自带的collections包中有很多有用的数据结构可供使用,其中有个叫OrderedDict类,它可以在使用的时候记录元素插入顺序,在遍历使用的时候就可以按照原顺序遍历。 a = {"a":1,"b"...

芝麻糖人
今天
0
0
RestTemplate HttpMessageConverter

RestTemplate 微信接口 text/plain HttpMessageConverter

微小宝
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部