最近項目中會用到將地址轉換為經緯的。從出來，還一直未遇到過這類問題，下來自己提前學習了，將自己所學的記錄在案。
在網上找了很多資料，最后確定了，百度的API，有實現相關的接口（API地址）。使用API時，需要申請一個ak，才能正常的進行訪問。
上圖是一個原理，即當我們傳入對應的值時，返回對應的信息。這里我現在了返回json對象，對於XML操作有點復雜，在此省略。注：在用ajax調用時，dataType一定一定為JSONP，否則，你就慢慢找錯吧（這也是花了我很多時間的地方，郁悶了很久）。這里為JSONP是因為這里跨域了。好了，下面就直接上代碼了：
1 <form id="form1" runat="server"> 2 <div style="width: 500px; height: 100px; border: 1px solid; float: left;"> 3 <span style="width: 60px; margin: 12px 0 6px 20px; font-size: 14px; color: #808080;">地址：</span> 4 <input type="text" id="address" placeholder="成都市金牛區一環路西三段撫琴東北路撫林巷" style="width: 300px; height: 30px; margin: 20px 0 0 0;" /> 5 <input type="button" id="search_address" value="搜索" style="width: 60px; height: 30px;" /> 6 <br /> 7 <span id="lng" style="width: 60px; margin: 12px 0 6px 20px; font-size: 14px; color: #808080;">經度：</span><br /> 8 <span id="lat" style="width: 60px; margin: 12px 0 6px 20px; font-size: 14px; color: #808080;">緯度：</span> 9 </div> 10 <div style="width: 500px; height: 500px; border: 1px solid; float: left; margin-left: 200px;"> 11 <span style="width: 60px; margin: 12px 0 6px 20px; font-size: 14px; color: #808080;">經度：</span> 12 <input type="text" value="" placeholder="104.05033320413" id="txtlng" style="width: 300px; height: 20px; margin: 20px 0 0 0;" /> 13 <br /> 14 <span style="width: 60px; margin: 12px 0 6px 20px; font-size: 14px; color: #808080;">緯度：</span> 15 <input type="text" value="" placeholder="30.68458575873" id="txtlat" style="width: 300px; height: 20px; margin: 20px 0 0 0;" /> 16 <br /> 17 <input type="button" id="search_lng_lat" value="搜索" style="height: 30px; margin-top: 12px; margin-left: 220px;" /><br /> 18 <span id="spanadderss" style="width: 60px; margin: 12px 0 6px 20px; font-size: 14px; color: #808080;">地址：</span> 19 </div> 20 </form>
1 $(document).ready(function () { 2 /* 3 根據地址信息獲取經緯度,返回json對象： 4 status Int 返回結果狀態值，成功返回0。 5 location object 經緯度坐標 6 lat float 緯度值 7 lng float 經度值 8 precise Int 位置的附加信息，是否精確查找。1為精確查找，0為不精確。 9 confidence Int 可信度 10 level string 地址類型 11 12 { 13 status: 0, 14 result: 15 { 16 location: 17 { 18 lng: 116.30814954222, 19 lat: 40.056885091681 20 }, 21 precise: 1, 22 confidence: 80, 23 level: "商務大廈" 24 } 25 } 26 */ 27 $('#search_address').click(function () { 28 var address = $.trim($('#address').val()); 29 if (address != undefined && address != '') { 30 var url = 'http://api.map.baidu.com/geocoder/v2/?ak=eIxDStjzbtH0WtU50gqdXYCz&output=json&address=' + encodeURIComponent(address); 31 //根據地點名稱獲取經緯度信息 32 $.ajax({ 33 type: "POST", 34 url: url, 35 dataType: "JSONP", 36 success: function (data) { 37 if (parseInt(data.status) == 0) { 38 $("#lng").html("經度：" + data.result.location.lng); 39 $("#lat").html("緯度：" + data.result.location.lat); 40 } 41 } 42 }); 43 } 44 }); 45 /* 46 根據經緯度獲取詳細地址及其周邊信息，返回json對象： 47 status constant 返回結果狀態值， 成功返回0，其他值請查看附錄。 48 location 49 lat 緯度坐標 50 lng 經度坐標 51 formatted_address 結構化地址信息 52 business 所在商圈信息，如 "人民大學,中關村,蘇州街" 53 addressComponent city 城市名 54 district 區縣名 55 province 省名 56 street 街道名 57 street_number 街道門牌號 58 pois（周邊poi數組） 59 addr 地址信息 60 cp 數據來源 61 distance 離坐標點距離 62 name poi名稱 63 poiType poi類型，如’ 辦公大廈,商務大廈’ 64 point poi坐標{x,y} 65 tel 電話 66 uid poi唯一標識 67 zip 郵編 68 */ 69 $('#search_lng_lat').click(function () { 70 var lng = $.trim($('#txtlng').val()); 71 var lat = $.trim($('#txtlat').val()); 72 var url = 'http://api.map.baidu.com/geocoder/v2/?ak=eIxDStjzbtH0WtU50gqdXYCz&output=json&pois=1&location=' + lat + "," + lng; 73 $.ajax({ 74 type: "POST", 75 url: url, 76 dataType: "JSONP", 77 success: function (data) { 78 if (parseInt(data.status) == 0) { 79 var result = "地址：" + data.result.formatted_address + "</br>"; 80 result += "省名:" + data.result.addressComponent.province + "</br>"; 81 result += "城市名:" + data.result.addressComponent.city + "</br>"; 82 result += "區縣名:" + data.result.addressComponent.district + "</br>"; 83 result += "街道名:" + data.result.addressComponent.street + "</br>"; 84 result += "街道門牌號:" + data.result.addressComponent.street_number + "</br>"; 85 result += "周邊信息：</br>"; 86 for (var i = 0; i < data.result.pois.length; i++) { 87 result += "地址信息:" + data.result.pois[i].addr 88 + ",數據來源:" + data.result.pois[i].cp 89 + ",離坐標點距離:" + data.result.pois[i].distance 90 + ",poi名稱:" + data.result.pois[i].name 91 + ",poi類型:" + data.result.pois[i].poiType 92 + ",poi坐標x:" + data.result.pois[i].point.x 93 + ",poi坐標y:" + data.result.pois[i].point.y 94 + ",電話:" + data.result.pois[i].tel 95 + ",poi唯一標識:" + data.result.pois[i].uid 96 + ",郵編:" + data.result.pois[i].zip + "</br>"; 97 } 98 $('#spanadderss').html(result); 99 } 100 } 101 }); 102 }); 103 });
代碼中已經有詳細的解釋了，若果實在不懂的話，就點擊API地址，這里面更詳細。這里只是個人的知識整理，只做為一個記錄，若對你能有什么幫助，那我也感到十分高興。