Html5 Geolocation获取地理位置信息实例


Posted in HTML / CSS onDecember 09, 2016

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

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

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

Html5 Geolocation获取地理位置信息实例

代码如下所示(其中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;
})();

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
Jan 06 HTML / CSS
详解CSS3选择器的使用方法汇总
Nov 24 HTML / CSS
css3编写浏览器背景渐变背景色的方法
Mar 05 HTML / CSS
CSS3贝塞尔曲线示例:创建链接悬停动画效果
Nov 19 HTML / CSS
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
Jan 27 HTML / CSS
使用Html5、CSS实现文字阴影效果
Jan 17 HTML / CSS
HTML5 Canvas 起步(2) - 路径
May 12 HTML / CSS
通过Canvas及File API缩放并上传图片完整示例
Aug 08 HTML / CSS
html5手机端页面可以向右滑动导致样式受影响的问题
Jun 20 HTML / CSS
HTML5拍照和摄像机功能实战详解
Jan 24 HTML / CSS
css常用字体属性与背景属性介绍
Feb 28 HTML / CSS
css让页脚保持在底部位置的四种方案
Jul 23 HTML / CSS
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
Dec 03 #HTML / CSS
HTML5标签大全
Nov 23 #HTML / CSS
HTML5拖放效果的实现代码
Nov 17 #HTML / CSS
html5 div布局与table布局详解
Nov 16 #HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
Nov 16 #HTML / CSS
HTML5制作表格样式
Nov 15 #HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
Nov 14 #HTML / CSS
You might like
动漫定律:眯眯眼都是怪物!这些角色狠话不多~
2020/03/03 日漫
php检测mysql表是否存在的方法小结
2017/07/20 PHP
在b/s开发中经常用到的javaScript技术
2006/08/23 Javascript
javaScript 读取和设置文档元素的样式属性
2009/04/14 Javascript
jQuery总体架构的理解分析
2011/03/07 Javascript
基于Jquery的仿照flash放大图片效果代码
2011/03/16 Javascript
更换select下拉菜单背景样式的实现代码
2011/12/20 Javascript
JS实现div居中示例
2014/04/17 Javascript
jquery实现的一个文章自定义分段显示功能
2014/05/23 Javascript
jQuery源码解读之removeAttr()方法分析
2015/02/20 Javascript
JS给Textarea文本框添加行号的方法
2015/08/20 Javascript
jQuery实现图像旋转动画效果
2016/05/29 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
2016/08/29 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
2017/06/04 Javascript
关于vue的npm run dev和npm run build的区别介绍
2019/01/14 Javascript
react同构实践之实现自己的同构模板
2019/03/13 Javascript
Vue的路由及路由钩子函数的实现
2019/07/02 Javascript
javascript之分片上传,断点续传的实际项目实现详解
2019/09/05 Javascript
vue实现鼠标经过动画
2019/10/16 Javascript
详解关于Vue单元测试的几个坑
2020/04/26 Javascript
js仿京东放大镜效果
2020/08/09 Javascript
python 生成目录树及显示文件大小的代码
2009/07/23 Python
Python 专题四 文件基础知识
2017/03/20 Python
python matplotlib坐标轴设置的方法
2017/12/05 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
Django文件存储 自己定制存储系统解析
2019/08/02 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
python实现感知机模型的示例
2020/09/30 Python
详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据
2020/12/13 Python
草莓网美国官网:Strawberrynet USA
2016/12/11 全球购物
端口镜像是怎么实现的
2014/03/25 面试题
企业文化理念标语
2014/06/10 职场文书
商业企业管理专业求职信
2014/07/10 职场文书
党的群众路线教育实践活动教师自我剖析材料
2014/10/09 职场文书
党员公开承诺书2015
2015/01/21 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书