使用html5獲取當前手機的經緯度,並接入百度地圖API,查詢出當前位置


最近項目需要,稍微研究一下html5獲取當前地理位置的問題。

獲取當前位置的經緯度很簡單,一句代碼就搞定

navigator.geolocation.getCurrentPosition(function (position) {
                longitude = position.coords.longitude;
                latitude = position.coords.latitude;
            });

然后查閱百度地圖API,很easy,也是幾句代碼就搞定的事

var map = new BMap.Map("allmap");
var point = new BMap.Point(longitude,latitude);
var geoc = new BMap.Geocoder();
geoc.getLocation(point, function(rs){
            var addComp = rs.addressComponents;
            alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
        });

好的,本以為到此結束,結果實際測試發現有點問題,顯示的位置與我的真正位置偏差大約兩三公里左右。

一開始以為是html5獲取經緯度的偏差問題,然而並不是

然后開始查資料,求助強大的度娘,然后無意中發現了一個叫做 坐標轉換 的東西,一搜索才知道,原來百度地圖對坐標進行了深度封裝,必須通過他提供的接口進行坐標轉換才行

(當然了,還是因為我以前沒接觸過百度地圖,所以不知道這點知識,常用百度地圖api的應該對這個很熟悉的吧)

好了,廢話不多說,上最終代碼吧

            var map = new BMap.Map("allmap");
            var longitude, latitude;
            navigator.geolocation.getCurrentPosition(function (position) {
                longitude = position.coords.longitude;
                latitude = position.coords.latitude;
            });
            setTimeout(function () {
                var gpsPoint = new BMap.Point(longitude, latitude);
                BMap.Convertor.translate(gpsPoint, 0, function (point) {
                    var geoc = new BMap.Geocoder();
                    geoc.getLocation(point, function (rs) {
                        var addComp = rs.addressComponents;
                        alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
                    });
                });
            }, 3000);

這段代碼依賴兩個包

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=秘鑰"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>

 convertor.js 源碼

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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM