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的checked伪类实现OL的隐藏显示的方法
Dec 18 HTML / CSS
推荐10个CSS3 制作的创意下拉菜单效果
Feb 11 HTML / CSS
css3 position fixed固定居中问题解决方案
Aug 19 HTML / CSS
css3媒体查询中device-width和width的区别详解
Mar 27 HTML / CSS
HTML5是否真的可以取代Flash
Feb 10 HTML / CSS
浅谈three.js中的needsUpdate的应用
Nov 12 HTML / CSS
HTML5 source标签:媒介元素定义媒介资源
Jan 29 HTML / CSS
H5离线存储Manifest原理及使用
Apr 28 HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
May 08 HTML / CSS
AmazeUI 图标的示例代码
Aug 13 HTML / CSS
canvas 绘图时位置偏离的问题解决
Sep 16 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
Sep 16 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
php生成N个不重复的随机数实例
2013/11/12 PHP
实用的PHP带公钥加密类分享(每次加密结果都不一样哦)
2014/08/20 PHP
Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 2611816 bytes)
2014/11/08 PHP
Thinkphp无限级分类代码
2015/11/11 PHP
使用ThinkPHP的自动完成实现无限级分类实例详解
2016/09/02 PHP
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
2010/04/27 Javascript
Jquery Uploadify上传带进度条的简单实例
2014/02/12 Javascript
js解决select下拉选不中问题
2014/10/14 Javascript
javascript中AJAX用法实例分析
2015/01/30 Javascript
微信小程序 Storage API实例详解
2016/10/02 Javascript
微信小程序 radio单选框组件详解及实例代码
2017/01/10 Javascript
浅谈Javascript事件对象
2017/02/05 Javascript
vue生命周期的探索
2019/04/03 Javascript
vue 父组件中调用子组件函数的方法
2019/06/06 Javascript
js模拟F11页面全屏显示
2019/09/17 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
2020/07/31 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
2020/11/12 Javascript
Python中列表(list)操作方法汇总
2014/08/18 Python
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
老生常谈python之鸭子类和多态
2017/06/13 Python
python+opencv实现的简单人脸识别代码示例
2017/11/14 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
Django框架orM与自定义SQL语句混合事务控制操作
2019/06/27 Python
Python3的socket使用方法详解
2020/02/18 Python
Python中logging日志记录到文件及自动分割的操作代码
2020/08/05 Python
将不规则的Python多维数组拉平到一维的方法实现
2021/01/11 Python
诗狄娜化妆品官方网站:Stila Cosmetics
2016/12/21 全球购物
澳大利亚婴儿礼品公司:The Baby Gift Company
2018/11/04 全球购物
介绍一下游标
2012/01/10 面试题
公安派出所所长四风问题个人对照检查材料
2014/10/04 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书
2015年家长学校工作总结
2015/04/22 职场文书
招商银行收入证明
2015/06/17 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
【海涛dota解说】DCG联赛第一周 LGD VS DH
2022/04/01 DOTA