最近項目需要,稍微研究一下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; })();