开发者社区> 长征6号> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Html5 Geolocation获取地理位置信息

简介:
+关注继续查看

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 })();
复制代码
---------------------------------------------------------------------------------
笔者水平有限,若有错漏,欢迎指正,如果转载以及CV操作,请务必注明出处,谢谢!
分类: Html | Css

本文转自Windstep博客园博客,原文链接:http://www.cnblogs.com/lwbqqyumidi/archive/2012/11/10/2764352.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
html5指南 -- 7.geolocation结合google maps一例
  demo地址:http://www.mycookingroom.com/geo.html     今天我们将把html5的geolocation结合google maps开发一个小的应用。google maps的api地址:https://developers.google.com/maps/documentation/javascript/?hl=zh-CN。
612 0
html5指南--4.使用Geolocation
  今天我们要学习的是使用Geolocation实现定位功能。我们可以通过navigator.geolocation获取Geolocation对象,他提供了下列方法: getCurrentPosition(callback,errorCallback,options):获取当前位置; watchPosition(callback,error,options):开始监控当前位置; clearWatch(id):停止监控当前位置。
495 0
HTML5 地理位置定位(HTML5 Geolocation)原理及应用
  地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用。今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个浏览器的数据精度情况。
704 0
HTML5的Geolocation API
Geolocation API用于将用户当前地理位置信息共享给信任的站点,这涉及用户的隐私安全问题,所以当一个站点需要获取用户的当前地理位置,浏览器会提示用户是“允许” or “拒绝”。 先看看哪些浏览器支持Geolocation API: IE9.0+、FF3.5+、Safari5.0+、Chrome5.0+、Opera10.6+、IPhone3.0+、Android2.0+ 也就是说除IE6~IE8外,其它最新的浏览器基本上都支持,包括最新的移动手机。
640 0
【前端面试知识题】- 3. HTML && CSS
它是Web应用程序的传输协议,提供了双向的、按序到达的数据流。它是HTML5新増的协议, WebSocket的连接是持久的,它在客户端和服务器之间保持双工连接,服务器的更新可以及时推送到客户端,而不需要客户端以一定的时间间隔去轮询。
0 0
HTML之文本格式化、链接、头部、CSS(笔记小结)
HTML之文本格式化、链接、头部、CSS(笔记小结)
0 0
【前端】css布局html页面之inline-block布局错位解决方法
本篇文章中,主要讲讲前端布局的情况 对于,对于刚接触前端开发的小伙伴来说,布局是一个比较重要的知识点,如果知识点理解不到位,那么很容易出现布局错位的情况
0 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
天猫 HTML5 互动技术实践
立即下载
天猫HTML5互动技术实践
立即下载
《零基础HTML入门教程》
立即下载