Heim > Artikel > Web-Frontend > Ausführliche Erläuterung der gemeinsamen Nutzung von Html5-Geolocation-Beispielcode zum Abrufen geografischer Standortinformationen

Ausführliche Erläuterung der gemeinsamen Nutzung von Html5-Geolocation-Beispielcode zum Abrufen geografischer Standortinformationen

黄舟Original: 2017-03-18 15:59:201867Durchsuche

In diesem Artikel werden hauptsächlich Html5 Geolokalisierungsbeispiele zum Abrufen geografischer Standortinformationen vorgestellt. Es hat einen gewissen Referenzwert.

Html5 bietet eine API für geografische Standortinformationen, mit der der aktuelle Standort des Benutzers über den Browser ermittelt werden kann. Basierend auf dieser Funktion können standortbasierte Serviceanwendungen entwickelt werden. Bevor geografische Standortinformationen abgerufen werden, fragt der Browser den Benutzer zunächst, ob er bereit ist, seine Standortinformationen weiterzugeben. Diese können nur verwendet werden, nachdem der Benutzer zugestimmt hat.

Html5 ruft geografische Standortinformationen über die Geolocation-API mithilfe seiner getCurrentPosition-Methode ab. Diese Methode enthält drei Parameter, nämlich die Rückruffunktion , die ausgeführt wird, wenn die geografischen Standortinformationen erfolgreich sind Die Rückruffunktion und die optionalen Eigenschaftskonfigurationselemente werden im Fehlerfall ausgeführt.

Die folgende Demo demonstriert das Abrufen geografischer Standortinformationen über Geolocation und die Anzeige des aktuellen Standorts auf Baidu Map (durch Aufruf der Baidu Map API). Die experimentellen Ergebnisse zeigten, dass sich der Standort am Eingang der Huandong 4th Road in der Universitätsstadt befand. Die Abweichung von meinem Standort (HuaGong-Studentenwohnheim) ist immer noch etwas groß und erreicht etwa 200-300 Meter.

Ausführliche Erläuterung der gemeinsamen Nutzung von Html5-Geolocation-Beispielcode zum Abrufen geografischer Standortinformationen

Der Code lautet wie folgt (convertor.js ist die von Baidu Maps bereitgestellte Koordinatenkonvertierungsdatei):

<!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>
        <p id="map" style="width:600px; height:400px">
        </p>
    </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-Datei:

(function() { // 闭包
    function load_script(xyUrl, callback) {
        var head = document.getElementsByTagName(&#39;head&#39;)[0];
        var script = document.createElement(&#39;script&#39;);
        script.type = &#39;text/javascript&#39;;
        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 = &#39;cbk_&#39; + 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;
})();

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der gemeinsamen Nutzung von Html5-Geolocation-Beispielcode zum Abrufen geografischer Standortinformationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Ausführliche Erläuterung der Audio- und Videosteuerungscodebeispiele für neue H5-AttributeNächster Artikel：Ausführliche Erläuterung der Audio- und Videosteuerungscodebeispiele für neue H5-Attribute

In Verbindung stehende Artikel

Mehr sehen