HTML5 Geolocation獲取地理位置信息

時間 2019-11-13

標籤 html5 html geolocation 獲取地理位置信息欄目 HTML5 简体版

原文原文鏈接

Html5中提供了地理位置信息的API，經過瀏覽器來獲取用戶當前位置。基於此特性能夠開發基於位置的服務應用。在獲取地理位置信息前，首先瀏覽器都會向用戶詢問是否願意共享其位置信息，待用戶贊成後才能使用。javascript

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

代碼以下所示（其中convertor.js爲百度地圖提供的座標轉化文件）：html5

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>H5地理位置Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=dGg7NKEkMCp8j1pWHCHZ3nhk"></script>
    <script type="text/javascript" src="js/convertor.js"></script>
    <style>
        html,body,#map{width:100%;height:100%;padding:0;margin:0;}
    </style>
</head>
<body>
 <div id="map"></div>
 <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, 0, function(point){
            var marker = new BMap.Marker(point);
            map.addOverlay(marker);
            map.centerAndZoom(point, 15);
        });
    }
    
    function handleError(error){
        alert('error');
    }
</script>
</body>
</html>

在手機上實現的效果以下：java

其中BMap.Convertor.translate(gpsPoint,0,translateCallback); //真實經緯度轉成百度座標
其中gpsPoint var gpsPoint = new BMap.Point(經度,緯度);
( GPS座標) 0：表明GPS；也能夠是2：google座標； translateCallback：回掉函數

convertor.js文件：git

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