Home >Web Front-end >H5 Tutorial >Detailed explanation of Html5 Geolocation sample code sharing for obtaining geographical location information

Detailed explanation of Html5 Geolocation sample code sharing for obtaining geographical location information

黄舟Original: 2017-03-18 15:59:201919browse

This article mainly introduces Html5 Geolocation to obtain geographical location information examples, which has certain reference value. Interested students can learn about it.

Html5 provides API for geographical location information, which can obtain the user's current location through the browser. Based on this feature, location-based service applications can be developed. Before obtaining geographical location information, the browser will first ask the user if they are willing to share their location information, and it can only be used after the user agrees.

Html5 obtains geographical location information through the Geolocation API, using its getCurrentPosition method. There are three parameters in this method, which are the callback function executed when the geographical location information is successfully obtained. The callback function and optional property configuration items executed in case of failure.

The following Demo demonstrates obtaining geographical location information through Geolocation and displaying the current location on Baidu Map (by calling Baidu Map API). The experimental results showed that the location was located at the entrance of Huandong 4th Road in the university town. The deviation from my location (HuaGong student dormitory) is still a bit large, reaching about 200-300 meters.

Detailed explanation of Html5 Geolocation sample code sharing for obtaining geographical location information

The code is as follows (convertor.js is the coordinate conversion file provided by Baidu Maps):

<!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 file:

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

The above is the detailed content of Detailed explanation of Html5 Geolocation sample code sharing for obtaining geographical location information. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of H5 new attributes audio and video control code examplesNext article：Detailed explanation of H5 new attributes audio and video control code examples

See more

Detailed explanation of Html5 Geolocation sample code sharing for obtaining geographical location information

Related articles