Html5 Geolocation获得自然地理部位信息内容案例

日期:2020-09-16 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

Html5中出示了自然地理部位信息内容的API,根据访问器来获得客户当今部位。根据此特点能够开发设计根据部位的服务运用。在获得自然地理部位信息内容前,最先访问器都会向客户了解是不是想要共享资源其部位信息内容,待客户愿意后才可以应用。

Html5获得自然地理部位信息内容是根据Geolocation API出示,应用其getCurrentPosition方式,此方式中有3个主要参数,各自是取得成功获得到自然地理部位信息内容时所实行的回调函数涵数,不成功时所实行的回调函数涵数和可选特性配备项。

以下Demo演试了根据Geolocation获得自然地理部位信息内容,并在百度搜索地形图上显示信息当今部位(根据启用百度搜索地形图API)。试验結果发现部位被精准定位到了大学城里环东4路通道处,与自己所属部位(华工学员寝室)误差還是有点大的,做到200⑶00米上下。

编码以下所示(在其中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;
})();


以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。