Html5 Geolocation获取地理位置信息实例
Html5中提供了地理位置信息的API,通过浏览器来获取用户当前位置。基于此特性可以开发基于位置的服务应用。在获取地理位置信息前,首先浏览器都会向用户询问是否愿意共享其位置信息,待用户同意后才能使用。
Html5获取地理位置信息是通过Geolocation API提供,使用其getCurrentPosition方法,此方法中有三个参数,分别是成功获取到地理位置信息时所执行的回调函数,失败时所执行的回调函数和可选属性配置项。
如下Demo演示了通过Geolocation获取地理位置信息,并在百度地图上显示当前位置(通过调用百度地图API)。实验结果发现位置被定位到了大学城内环东四路入口处,与本人所在位置(华工学生宿舍)偏差还是有点大的,达到200-300米左右。
代码如下所示(其中convertor.js为百度地图提供的坐标转化文件):
<!DOCTYPE html> <html> <head> <title>H5地理位置Demo</title> <script src="http://api.map.baidu.com/api?v=1.3" type="text/javascript"> </script> <script type="text/javascript" src="convertor.js"> </script> </head> <body> <div id="map" style="width:600px; height:400px"> </div> </body> <script type="text/javascript"> if (window.navigator.geolocation) { var options = { enableHighAccuracy: true, }; window.navigator.geolocation.getCurrentPosition(handleSuccess, handleError, options); } else { alert("浏览器不支持html5来获取地理位置信息"); } function handleSuccess(position){ // 获取到当前位置经纬度 本例中是chrome浏览器取到的是google地图中的经纬度 var lng = position.coords.longitude; var lat = position.coords.latitude; // 调用百度地图api显示 var map = new BMap.Map("map"); var ggPoint = new BMap.Point(lng, lat); // 将google地图中的经纬度转化为百度地图的经纬度 BMap.Convertor.translate(ggPoint, 2, function(point){ var marker = new BMap.Marker(point); map.addOverlay(marker); map.centerAndZoom(point, 15); }); } function handleError(error){ } </script> </html>
convertor.js文件:
(function() { // 闭包 function load_script(xyUrl, callback) { var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.type = 'text/javascript'; script.src = xyUrl; // 借鉴了jQuery的script跨域方法 script.onload = script.onreadystatechange = function() { if ((!this.readyState || this.readyState === "loaded" || this.readyState === "complete")) { callback && callback(); // Handle memory leak in IE script.onload = script.onreadystatechange = null; if (head && script.parentNode) { head.removeChild(script); } } }; // Use insertBefore instead of appendChild to circumvent an IE6 bug. head.insertBefore(script, head.firstChild); } function translate(point, type, callback) { var callbackName = 'cbk_' + Math.round(Math.random() * 10000); // 随机函数名 var xyUrl = "http://api.map.baidu.com/ag/coord/convert?from=" + type + "&to=4&x=" + point.lng + "&y=" + point.lat + "&callback=BMap.Convertor." + callbackName; // 动态创建script标签 load_script(xyUrl); BMap.Convertor[callbackName] = function(xyResult) { delete BMap.Convertor[callbackName]; // 调用完需要删除改函数 var point = new BMap.Point(xyResult.x, xyResult.y); callback && callback(point); } } window.BMap = window.BMap || {}; BMap.Convertor = {}; BMap.Convertor.translate = translate; })();
(资源库 www.zyku.net)
栏 目:HTML5
下一篇:移动端html5页面长按实现高亮全选文本内容的兼容解决方案
本文标题:Html5 Geolocation获取地理位置信息实例
本文地址:https://www.zyku.net/html5/556.html
您可能感兴趣的文章
- 04-03基于JQuery和原生JavaScript实现网页定位导航特效
- 12-26解决Dreamweaver中文光标定位不准问题(光标位置不对)
- 09-22网易云音乐如何关闭歌单共享
- 07-03帝国CMS没有相关文章,则调用最新文章的
- 09-19hellotalk注销教程分享
- 10-21米游社浏览记录查询方法分享
- 05-06MIUI12桌面调换页面顺序教程
- 03-04wordpress支持中文用户名的实现方法
- 02-14HTML5不支持frameset的两种解决方法
- 03-14阿里云服务器优惠券代金券领取中心
- 12-04Windows Server 2016磁盘管理快捷入口
- 03-29正确的使用Python临时文件
- 01-19时光韩剧-时光韩剧应用软件功能介绍
- 02-12小米11背部轻敲功能开启教程
- 12-26手绘板大师-手绘板大师应用软件功能介
- 06-18帝国CMS7.5版系统模型新增发布后和修
- 10-20QQ邮箱怎么更换首页布局
- 07-07Yii2第三方类库插件Imagine的安装和使
- 01-11润建智能工程-润建智能工程应用软件功
- 01-11WeCam365监控-WeCam365监控应用软件功
最近更新
阅读排行
猜你喜欢
- 01-11苹果13添加快捷指令方法
- 02-20写给喜欢用DW编写CSS人的一些建议
- 02-22一加9pro隐藏手势指示条设置方法
- 12-16华为nova5如何添加桌面快捷方式
- 09-23vivox70如何拍月亮
- 10-19iphone13pro面容解锁怎么设置
- 02-08opporeno5pro开启定位方法
- 03-07redmi手表绑定手机教程
- 01-13天晟艺术一点通-天晟艺术一点通应用软
- 01-11自习空间-自习空间应用软件功能介绍