HTML5 Geolocation获取地理位置信息

发布时间:2020-12-26 发布网站:前端之家 F2er.com
前端之家收集整理的这篇文章主要介绍了HTML5 Geolocation获取地理位置信息前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

<!DOCTYPE html>
<htmlhead>
    meta charset="utf-8"/>
    title>H5地理位置Demo</name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=dGg7NKEkMCp8j1pWHCHZ3nhk"></script="js/convertor.js"style>
        html,body,#map{width:100%;heightpadding0margin}
    body>
 div id="map"div="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地图中的经纬度
         lng  position.coords.longitude;
         lat  position.coords.latitude;
         调用百度地图api显示
         map = new BMap.Map(map);
         ggPoint  BMap.Point(lng,lat);
         将google地图中的经纬度转化为百度地图的经纬度
        BMap.Convertor.translate(ggPoint,(point){
             marker  BMap.Marker(point);
            map.addOverlay(marker);
            map.centerAndZoom(point,1)">15);
        });
    }
    
     handleError(error){
        alert('error);
    }
>

在手机上实现的效果如下:

HTML5 Geolocation获取地理位置信息

  • 其中BMap.Convertor.translate(gpsPoint,translateCallback);     //真实经纬度转成百度坐标
  • 其中gpsPoint var gpsPoint = new BMap.Point(经度,纬度);
  • ( GPS坐标)  0:代表GPS;也可以是2:google坐标 ;  translateCallback:回掉函数

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 = () {
            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);
    }
     translate(point,type,1)">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] = (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;
})();

 百度采用何种坐标体系?

百度地图api中采用两种坐标体系,经纬度坐标系和墨卡托投影坐标系。前者单位是度,后者单位是米,具体定义可以参见百科词条解释: 
http://baike.baidu.com/view/61394.htmhttp://baike.baidu.com/view/301981.htm

百度坐标为何有偏移?

国际经纬度坐标标准为WGS-84,国内必须至少使用国测局制定的GCJ-02,对地理位置进行首次加密。百度坐标在此基础上,进行了BD-09二次加密措施,更加保护了个人隐私。百度对外接口的坐标系并不是GPS采集的真实经纬度,需要通过坐标转换接口进行转换。

w3school演示地址:http://www.w3school.com.cn/tiy/t.asp?f=html5_geolocation_error

总结


以上是前端之家为你收集整理的HTML5 Geolocation获取地理位置信息全部内容,希望文章能够帮你解决HTML5 Geolocation获取地理位置信息所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。