移動設備GPS座標的獲取以及向百度座標的轉換

                                                             移動設備GPS座標的獲取以及向百度座標的轉換

 

JS文件中定義一下函數,在html頁面中調用loadPosition()函數就可直接進行執行。

入口函數:

functionloadPosition() {

   if (navigator.geolocation) {

        //alert("HTML5 Geolocation is supported in your browser.");檢測瀏覽器是否支持定位

        navigator.geolocation.getCurrentPosition(updateLocation, handleLocationError, { timeout: 50000, maximumAge: 20000 });   

    }

   else {

        alert("HTML5 Geolocation is not supported in your browser.");   

    }

}

調用成功後的回調函數

functionupdateLocation(position) {

   var latitude = position.coords.latitude;//緯度

   var longitude = position.coords.longitude;//經度

  // var accuracy = position.coords.accuracy;定位精度

  // var timestamp = position.timestamp;

  // alert("獲取的GPS座標經度:"+longitude+"。緯度:"+latitude);

   var gpsPoint = new BMap.Point(longitude, latitude);

    BMap.Convertor.translate(gpsPoint, 0, translateCallback);  //調用百度接口將GPS座標轉換成百度座標

}

調用失敗後的回調函數

functionhandleLocationError(error) {

   switch (error.code) {

        case 0:

            alert("There was an error while retrieving your location: " + error.message);

           break;

        case 1:

            alert("The user prevented this page from retrieving a location.");

           break;

        case 2:

            alert("The browser was unable to determine your location: " + error.message);

           break;

        case 3:

            alert("The browser timed out before retrieving the location.");

           break;

    }

}

 

 

//座標轉換完之後的回調函數

translateCallback = function (point) {

    $("#longitude").val(point.lng);

    $("#latitude").val(point.lat);

   alert("轉化爲百度座標爲經度:" + point.lng + "。緯度:" + point.lat)

}

 

調用座標轉換函數時要用到以下兩個js文件,將其製成js文件包含進去就可以。我做項目時用的是mvc框架,直接將下面兩個js文件丟到Scripts文件夾,然後在用到這兩個文件的頁面用@Scripts.Render("~/scripts/api.map.baidu.js")

@Scripts.Render("~/scripts/convertor.js")//以上兩個js文件名是自己隨便起的

包含進去就可以

 

api.map.baidu.js

(function(){ window.BMap_loadScriptTime = (new Date).getTime(); document.write('

 

 

convertor.js

//2011-7-25

(function(){       //閉包

function load_script(xyUrl, callback){

   var head = document.getElementsByTagName_r('head')[0];

   var script = document_createElement_x_x('script');

    script.type = 'text/javascript';

    script.src = xyUrl;

   //借鑑了jQueryscript跨域方法

    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 a  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;

})();

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章