首页 > 作文

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

更新时间:2023-04-06 12:47:45 阅读: 评论:0

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.g北京条约主要内容eolocation) {            var options = {                enablehighaccuracy: true,            };            window.navigator.geolocation.getcurrentposition(handlesuccess, handleerror, options);        } el {            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>

conv演绎推理ertor.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);                }            }        };        // u inrtbefore instead of appendchild to circumvent an ie6 bug.        head.inrtbefore(script, head.firstchild);    }    function translate(p潇湘雨oint, type, callback) {        var callbackname = 'cbk_' + math.round(math.r上操andom() * 10000); // 随机函数名        var xyurl = "/d/file/titlepic/convert" + 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.887551.com。

本文发布于:2023-04-06 12:47:43,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/65cc97ad4916fd2986ddcd112c09c651.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:Html5 Geolocation获取地理位置信息实例.doc

本文 PDF 下载地址:Html5 Geolocation获取地理位置信息实例.pdf

相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图