Html5中怎么利用Geolocation获取地理位置信息

这期内容当中小编将会给大家带来有关Html5中怎么利用Geolocation获取地理位置信息，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

创新互联长期为1000多家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为海口企业提供专业的网站建设、网站设计，海口网站改版等技术服务。拥有10多年丰富建站经验和众多成功案例,为您定制开发。

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

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

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

Html5中怎么利用Geolocation获取地理位置信息

代码如下所示（其中convertor.js为百度地图提供的坐标转化文件）：



    
        H5地理位置Demo

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){ }

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

上述就是小编为大家分享的Html5中怎么利用Geolocation获取地理位置信息了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联行业资讯频道。

文章标题：Html5中怎么利用Geolocation获取地理位置信息
文章URL：http://scjbc.cn/article/pchijp.html

Html5中怎么利用Geolocation获取地理位置信息

其他资讯