Heim > Artikel > Web-Frontend > Verwenden Sie Geolocation, um geografische Standortinformationen zu erhalten

Verwenden Sie Geolocation, um geografische Standortinformationen zu erhalten

php中世界最好的语言Original: 2018-03-26 11:46:231738Durchsuche

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen zur Verwendung von Geolocation zum Abrufen geografischer Standortinformationen vorstellen. Hier sind praktische Fälle, werfen wir einen Blick darauf.

Html5 bietet eine API für geografische Standortinformationen, um den aktuellen Standort des Benutzers über den Browser abzurufen. 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 der Methode getCurrentPosition ab. Diese Methode enthält drei Parameter, die ausgeführt werden, wenn die geografischen Standortinformationen erfolgreich abgerufen wurden Rückruffunktion, die Rückruffunktion und optionale Attributkonfigurationselemente werden ausgeführt, wenn ein Fehler auftritt.

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 zeigen, dass sich der Standort am Eingang der Huandong 4th Road in der Universitätsstadt befindet. Die Abweichung von meinem Standort (HuaGong-Studentenwohnheim) ist immer noch etwas groß und erreicht etwa 200-300 Meter.

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung von Paging-Abfragen

Detaillierte Erläuterung der Verwendung von faltbaren Panels in JS

Das obige ist der detaillierte Inhalt vonVerwenden Sie Geolocation, um geografische Standortinformationen zu erhalten. 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：Das mobile Terminal führt die Auswahl durch und hebt alle ausgewählten Textereignisse hervorNächster Artikel：Das mobile Terminal führt die Auswahl durch und hebt alle ausgewählten Textereignisse hervor

In Verbindung stehende Artikel

Mehr sehen