Geolocation获取地理地点音讯

By admin in 亚洲必赢app在哪下载 on 2019年3月29日

Html5中提供了地理地点消息的API,通过浏览器来获得用户眼下岗位。基于此特性能够付出基于地点的劳务使用。在取得地理地点音信前,首先浏览器都会向用户精晓是或不是情愿共享其职务新闻,待用户同意后才能使用。

Html5获取地理地点消息是经过Geolocation API提供,使用其getCurrentPosition方法,此办法中有八个参数,分别是马到功成赢获得地理地方新闻时所实施的回调函数,败北时所举行的回调函数和可选属性配置项。

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>H5地理位置Demo</title>
    <meta 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>
    <script type="text/javascript" src="js/convertor.js"></script>
    <style>
        html,body,#map{width:100%;height:100%;padding:0;margin:0;}
    </style>
</head>
<body>
 <div id="map"></div>
 <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, 0, function(point){
            var marker = new BMap.Marker(point);
            map.addOverlay(marker);
            map.centerAndZoom(point, 15);
        });
    }

    function handleError(error){
        alert('error');
    }
</script>
</body>
</html>

亚洲必赢app在哪下载,在手提式无线电话机上落到实处的效率如下:

亚洲必赢app在哪下载 1

 

个中BMap.Convertor.translate(gpsPoint,0,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 = 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;
})();

 

 百度选择何种坐标种类?

百度地图api中动用三种坐标种类,经纬度坐标系和墨卡托投影坐标系。前者单位是度,后者单位是米,具体定义能够瞻仰百科词条解释: 

  http://baike.baidu.com/view/61394.htmhttp://baike.baidu.com/view/301981.htm

百度坐标为什么有偏移?

国际经纬度坐标标准为WGS-84,国内必须至少使用国测局制定的GCJ-02,对地理地方展早先次加密。百度坐标在此基础上,实行了BD-0玖拾贰回加密方法,特别入保障障了个人隐秘。百度对外接口的坐标系并不是GPS采集的实事求是经纬度,供给经过坐标转换接口举办转换。

 

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

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 亚洲必赢app官方下载 版权所有