博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Html5 Geolocation获取地理位置信息(转)
阅读量:6540 次
发布时间:2019-06-24

本文共 2249 字,大约阅读时间需要 7 分钟。

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

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

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

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

1  2  3      4         H5地理位置Demo 5          7          9     10     11         
12
13 14 43

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 IE12                 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=" + type24                 + "&to=4&x=" + point.lng + "&y=" + point.lat25                 + "&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 })();

转载于:https://www.cnblogs.com/xingmeng/p/3994575.html

你可能感兴趣的文章
特此说明
查看>>
使用flume替代原有的scribe服务
查看>>
Hyper-V 2016 系列教程41 Windows 10 Hyper-V 系统要求
查看>>
Windows Server 2008 启用公共文件夹共享
查看>>
Apple Watch的非“智能手表”卖点
查看>>
函数指针和指针函数
查看>>
Python的函数参数传递:传值?引用?
查看>>
[转]分享2011年8个最新的jQuery Mobile在线教程
查看>>
android call require api level
查看>>
SQLSERVER是怎麽通过索引和统计信息来找到目标数据的(第一篇)
查看>>
Python版本切换和Pip安装
查看>>
SilverLigth学习笔记--控制 Silverlight控件样式(转)
查看>>
poj3262
查看>>
第四十天笔记
查看>>
4、动态代理
查看>>
Loj #6073.「2017 山东一轮集训 Day5」距离
查看>>
我的TCP/IP学习笔记
查看>>
轮毂电机光电增量编码器的ABZ信号详解
查看>>
洛谷——P1330 封锁阳光大学
查看>>
css选择器
查看>>