使用瀏覽器自帶定位功能初始化百度地圖

百度地圖自帶了定位的api,但是這個定位的精確度確實太低了。
所以我就用瀏覽器自帶的GPS功能獲取GPS座標,再通過百度地圖座標轉換的功能,初始化百度地圖。

<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
            body,
            html,
            #allmap {
                width: 100%;
                height: 100%;
                overflow: hidden;
                margin: 0;
                font-family: "微軟雅黑";
            }
        </style>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=這裏替換成你自己的"></script>
        <title>GPS轉百度</title>
    </head>

    <body>
        <div id="allmap"></div>
    </body>

</html>
<script type="text/javascript">
    if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError); // HTML5獲取GPS設備地理位置信息
    } else {
        document.getElementById("allmap").innerHTML = "Geolocation is not supported by this browser.";
    }

    function showPosition(position) {
        var y = position.coords.latitude; // 獲取經度
        var x = position.coords.longitude; // 獲取緯度
        initMap(x, y);
    }
    // HTML5獲取地理位置信息錯誤處理
    function showError(error) {
        switch(error.code) {
            case error.PERMISSION_DENIED:
                document.getElementById("allmap").innerHTML = "User denied the request for Geolocation."
                break;
            case error.POSITION_UNAVAILABLE:
                document.getElementById("allmap").innerHTML = "Location information is unavailable."
                break;
            case error.TIMEOUT:
                document.getElementById("allmap").innerHTML = "The request to get user location timed out."
                break;
            case error.UNKNOWN_ERROR:
                document.getElementById("allmap").innerHTML = "An unknown error occurred."
                break;
        }
    }

    function initMap(x, y) {
        // 百度地圖API功能
        //GPS座標
        var ggPoint = new BMap.Point(x, y);

        //地圖初始化
        var bm = new BMap.Map("allmap");
        bm.centerAndZoom(ggPoint, 15);
        bm.addControl(new BMap.NavigationControl());

        //添加gps marker和label
        var markergg = new BMap.Marker(ggPoint);
        bm.addOverlay(markergg); //添加GPS marker
        var labelgg = new BMap.Label("未轉換的GPS座標(錯誤)", {
            offset: new BMap.Size(20, -10)
        });
        markergg.setLabel(labelgg); //添加GPS label

        //座標轉換完之後的回調函數
        translateCallback = function(data) {
            if(data.status === 0) {
                var marker = new BMap.Marker(data.points[0]);
                bm.addOverlay(marker);
                var label = new BMap.Label("轉換後的百度座標(正確)", {
                    offset: new BMap.Size(20, -10)
                });
                marker.setLabel(label); //添加百度label
                bm.setCenter(data.points[0]);
            }
        }

        setTimeout(function() {
            var convertor = new BMap.Convertor();
            var pointArr = [];
            pointArr.push(ggPoint);
            convertor.translate(pointArr, 1, 5, translateCallback)
        }, 1000);
    }
</script>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章