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

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

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

 

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

而後查閱百度地圖API，很easy，也是幾句代碼就搞定的事

 

var map = new BMap.Map("allmap");<pre name="code" class="javascript">        var point = new BMap.Point(longitude,latitude);<pre name="code" class="javascript">        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獲取經緯度的誤差問題，然而並非

而後開始查資料，無心中發現了一個叫作 座標轉換 的東西，一搜索才知道，原來百度地圖對座標進行了深度封裝，必須經過他提供的接口進行座標轉換才行，廢話很少說，上最終代碼吧

 

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>