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

程序员文章站 2022-10-15 16:58:49

这篇文章主要介绍了Html5 Geolocation获取地理位置信息实例，具有一定的参考价值，有兴趣的同学可以了解一下。... 16-12-09...

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;
})();

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：苦瓜与竹笋可以同食吗？有什么功效呢？

下一篇： JavaScript实现选项卡效果的分析及步骤

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

利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位

突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习