Html5中提供了地理位置信息的API，通过浏览器来获取用户当前位置。基于此特性可以开发基于位置的服务应用。在获取地理位置信息前，首先浏览器都会向用户询问是否愿意共享其位置信息，待用户同意后才能使用。

Html5获取地理位置信息是通过Geolocation API提供，使用其getCurrentPosition方法，此方法中有三个参数，分别是成功获取到地理位置信息时所执行的回调函数，失败时所执行的回调函数和可选属性配置项。

如下Demo演示了通过Geolocation获取地理位置信息，并在百度地图上显示当前位置（通过调用百度地图API）。实验结果发现位置被定位到了大学城内环东四路入口处，与本人所在位置（华工学生宿舍）偏差还是有点大的，达到200-300米左右。

代码如下所示（其中convertor.js为百度地图提供的坐标转化文件）：

 1 <!DOCTYPE html>

 2 <html>

 3     <head>

 4         <title>H5地理位置Demo</title>

 5         <script src="http://api.map.baidu.com/api?v=1.3" type="text/javascript">

 6         </script>

 7         <script type="text/javascript" src="convertor.js">

 8         </script>

 9     </head>

10     <body>

11         <div id="map" style="width:600px; height:400px">

12         </div>

13     </body>

14     <script type="text/javascript">

15         if (window.navigator.geolocation) {

16             var options = {

17                 enableHighAccuracy: true,

18             };

19             window.navigator.geolocation.getCurrentPosition(handleSuccess, handleError, options);

20         } else {

21             alert("浏览器不支持html5来获取地理位置信息");

22         }

23

24         function handleSuccess(position){

25             // 获取到当前位置经纬度  本例中是chrome浏览器取到的是google地图中的经纬度

26             var lng = position.coords.longitude;

27             var lat = position.coords.latitude;

28             // 调用百度地图api显示

29             var map = new BMap.Map("map");

30             var ggPoint = new BMap.Point(lng, lat);

31             // 将google地图中的经纬度转化为百度地图的经纬度

32             BMap.Convertor.translate(ggPoint, 2, function(point){

33                 var marker = new BMap.Marker(point);

34                 map.addOverlay(marker);

35                 map.centerAndZoom(point, 15);

36             });

37         }

38

39         function handleError(error){

40

41         }

42     </script>

43 </html>

convertor.js文件：

 1 (function() { // 闭包

 2     function load_script(xyUrl, callback) {

 3         var head = document.getElementsByTagName('head')[0];

 4         var script = document.createElement('script');

 5         script.type = 'text/javascript';

 6         script.src = xyUrl;

 7         // 借鉴了jQuery的script跨域方法

 8         script.onload = script.onreadystatechange = function() {

 9             if ((!this.readyState || this.readyState === "loaded" || this.readyState === "complete")) {

10                 callback && callback();

11                 // Handle memory leak in IE

12                 script.onload = script.onreadystatechange = null;

13                 if (head && script.parentNode) {

14                     head.removeChild(script);

15                 }

16             }

17         };

18         // Use insertBefore instead of appendChild to circumvent an IE6 bug.

19         head.insertBefore(script, head.firstChild);

20     }

21     function translate(point, type, callback) {

22         var callbackName = 'cbk_' + Math.round(Math.random() * 10000); // 随机函数名

23         var xyUrl = "http://api.map.baidu.com/ag/coord/convert?from=" + type

24                 + "&to=4&x=" + point.lng + "&y=" + point.lat

25                 + "&callback=BMap.Convertor." + callbackName;

26         // 动态创建script标签

27         load_script(xyUrl);

28         BMap.Convertor[callbackName] = function(xyResult) {

29             delete BMap.Convertor[callbackName]; // 调用完需要删除改函数

30             var point = new BMap.Point(xyResult.x, xyResult.y);

31             callback && callback(point);

32         }

33     }

34

35     window.BMap = window.BMap || {};

36     BMap.Convertor = {};

37     BMap.Convertor.translate = translate;

38 })();

Html5 Geolocation获取地理位置信息(转)的更多相关文章

  1. Html5 Geolocation获取地理位置信息

    Html5中提供了地理位置信息的API,通过浏览器来获取用户当前位置.基于此特性可以开发基于位置的服务应用.在获取地理位置信息前,首先浏览器都会向用户询问是否愿意共享其位置信息,待用户同意后才能使用. ...

  2. AngularJS进阶(二十)HTML5实现获取地理位置信息并定位功能

    HTML5实现获取地理位置信息并定位功能 注:请点击此处进行充电! 前言 这篇文章主要介绍了HTML5实现获取地理位置信息并定位功能,本文讲解了原生HTML5.百度地图.谷歌地图等三种获取理位置信息并 ...

  3. html5实现获取地理位置信息并定位

    这里主要讲h5实现获取地理位置信息并定位功能,本文讲解了原生h5,百度地图,谷歌地图等三种获取地理信息并定位的方法,需要的朋友可以参考下: h5提供了地理位置功能(Geolocation API),能 ...

  4. HTML5实现获取地理位置信息并定位功能

    HTML5提供了地理位置定位功能(Geolocation API),能确定用户位置,我们可以借助HTML5的该特性开发基于地理位置信息的应用.本文结合实例给大家分享如何使用HTML5,借助百度.谷歌地 ...

  5. html5获取地理位置信息API

    html5获取地理位置信息API 在HTML5中,可以看下如何使用Geolocation API来获得用户的地理位置信息,如果该浏览器支持的话,且设备具有定位功能,就能够直接使用这组API来获取当前位 ...

  6. HTML5 获取地理位置信息

    HTML5增加的新功能,获取地理位置信息,如果浏览器支持且设备有定位功能,就能够直接使用这组API来获取当前信息位置.该Geolocation API可以应用于移动设备中的地理位置. Geolocat ...

  7. html5代码,获取地理位置

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta htt ...

  8. PhoneGap Geolocation 获取地理位置 api

    一. PhoneGap Geolocation 对象介绍 1.使应用程序可以访问地理位置信息.geolocation 对象提供了对设备 GPS 传感器的访问.Geolocation 提供设备的位置信息 ...

  9. 百度api:根据经纬度获取地理位置信息

    调用百度api,根据经度和纬度获取地理位置信息,返回Json. C#代码: using Newtonsoft.Json; using Newtonsoft.Json.Linq; using Syste ...

随机推荐

  1. pythonUnicodeDecodeError: ‘ascii’ codec can’t decode byte 0xe5 in position 108: ordinal not in range(128

    今天做网页到了测试和数据库交互的地方,其中HTML和数据库都是设置成utf-8格式编码,插入到数据库中是正确的,但是当读取出来的时候就会出错,原因就是Python的str默认是ascii编码,和uni ...

  2. 【BZOJ】【2435】【NOI2011】道路修建

    DFS/DP 本来以为是一道傻逼题,然而跪了好久……一直RE…… 直接dfs就好了……x->y val=c  :  ans+=abs(n-size[y]-size[y])*c; 然而为啥会一直R ...

  3. Spark源码分析

    名词解释 RDD全称为ResilientDistributedDataset,弹性分布式数据集.就是分布在集群节点上的数据集,这些集合可以用来进行各种操作.最重要的一点是,某个操作计算后的数据集可以缓 ...

  4. MySQL对索引的使用

    什么是索引 使用索引可快速访问数据库表中的特定信息.索引是对数据库表中一列或多列的值进行排序的一种结构,例如 order 表的订单号(orderNum)列.如果要按订单号查找特定订单,与必须搜索表中的 ...

  5. Informatica 常用组件Lookup缓存之三 重建查找高速缓存

    如果您认为查找源在 PowerCenter 上次构建高速缓存时已更改,则可指示 PowerCenter 重建查找高速缓存. 重建高速缓存时,PowerCenter 会覆盖现有永久高速缓存文件而创建新的 ...

  6. IPC$ 测试与防范

    物理机系统:Win7 虚拟机系统:Win2003 Netstat –an 查看本机端口 Netstat –ano 查看本机端口+PID 通过本机上操作(比如登录网站),然后命令,查看对方IP以及端口 ...

  7. 齐次坐标(Homogeneous Coordinates)

    原文:http://blog.163.com/m_note/blog/static/208197045201272341230195/ 齐次坐标(Homogeneous Coordinates) 问题 ...

  8. 导出DLLRegisterServer接口遇到的问题

    I'm trying to add DLLRegisterServer and DLLUnregisterServer entry points to an existing DLL that is ...

  9. HTML代码 CSS

    第一步.编写横向菜单的HTML代码架构 请将以下代码添加到HTML文档的导航栏区域中. <ul id="menu"> <li><a href=&quo ...

  10. linux 硬连接与软连接

    1.linux中文件占用一个inode,inode指向文件内容.2.文件名可以认为是一个指针,指向inode.硬连接相当于指针的整体拷贝,并不是对文件内容的拷贝.两个文件名(两个指针)都能修改文件,删 ...