用Geolocation獲取地理位置信息的方法

用Geolocation獲取地理位置信息的方法？這個問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供澄江網(wǎng)站建設(shè)、澄江做網(wǎng)站、澄江網(wǎng)站設(shè)計、澄江網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、澄江企業(yè)網(wǎng)站模板建站服務(wù)，十年澄江做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

Html5中提供了地理位置信息的API，通過瀏覽器來獲取用戶當(dāng)前位置?；诖颂匦钥梢蚤_發(fā)基于位置的服務(wù)應(yīng)用。在獲取地理位置信息前，首先瀏覽器都會向用戶詢問是否愿意共享其位置信息，待用戶同意后才能使用。

Html5獲取地理位置信息是通過Geolocation API提供，使用其getCurrentPosition方法，此方法中有三個參數(shù)，分別是成功獲取到地理位置信息時所執(zhí)行的回調(diào)函數(shù)，失敗時所執(zhí)行的回調(diào)函數(shù)和可選屬性配置項。

如下Demo演示了通過Geolocation獲取地理位置信息，并在百度地圖上顯示當(dāng)前位置（通過調(diào)用百度地圖API）。實驗結(jié)果發(fā)現(xiàn)位置被定位到了大學(xué)城內(nèi)環(huán)東四路入口處，與本人所在位置（華工學(xué)生宿舍）偏差還是有點(diǎn)大的，達(dá)到200-300米左右。

用Geolocation獲取地理位置信息的方法

代碼如下所示（其中convertor.js為百度地圖提供的坐標(biāo)轉(zhuǎn)化文件）：

<!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){
            // 獲取到當(dāng)前位置經(jīng)緯度  本例中是chrome瀏覽器取到的是google地圖中的經(jīng)緯度
            var lng = position.coords.longitude;
            var lat = position.coords.latitude;
            // 調(diào)用百度地圖api顯示
            var map = new BMap.Map("map");
            var ggPoint = new BMap.Point(lng, lat);
            // 將google地圖中的經(jīng)緯度轉(zhuǎn)化為百度地圖的經(jīng)緯度
            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); // 隨機(jī)函數(shù)名
        var xyUrl = "http://api.map.baidu.com/ag/coord/convert?from=" + type
                + "&to=4&x=" + point.lng + "&y=" + point.lat
                + "&callback=BMap.Convertor." + callbackName;
        // 動態(tài)創(chuàng)建script標(biāo)簽
        load_script(xyUrl);
        BMap.Convertor[callbackName] = function(xyResult) {
            delete BMap.Convertor[callbackName]; // 調(diào)用完需要刪除改函數(shù)
            var point = new BMap.Point(xyResult.x, xyResult.y);
            callback && callback(point);
        }
    }
    window.BMap = window.BMap || {};
    BMap.Convertor = {};
    BMap.Convertor.translate = translate;
})();

感謝各位的閱讀！看完上述內(nèi)容，你們對用Geolocation獲取地理位置信息的方法大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章題目：用Geolocation獲取地理位置信息的方法
本文路徑：http://muchs.cn/article8/iejcop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、網(wǎng)站內(nèi)鏈、網(wǎng)站導(dǎo)航、做網(wǎng)站、網(wǎng)站維護(hù)、微信公眾號

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容