javascript实现经纬度与地址的互转

　　最近项目中会用到将地址转换为经纬的。从出来，还一直未遇到过这类问题，下来自己提前学习了，将自己所学的记录在案。

　　在网上找了很多资料，最后确定了，百度的API，有实现相关的接口（API地址）。使用API时，需要申请一个ak，才能正常的进行访问。

　　

　　上图是一个原理，即当我们传入对应的值时，返回对应的信息。这里我现在了返回json对象，对于XML操作有点复杂，在此省略。注：在用ajax调用时，dataType一定一定为JSONP，否则，你就慢慢找错吧（这也是花了我很多时间的地方，郁闷了很久）。这里为JSONP是因为这里跨域了。好了，下面就直接上代码了：

 <form id="form1" runat="server">
         <div style="width: 500px; height: 100px; border: 1px solid; float: left;">
             <span style="width: 60px; margin: 12px 0 6px 20px; font-size: 14px; color: #808080;">地址：</span>
             <input type="text" id="address" placeholder="成都市金牛区一环路西三段抚琴东北路抚林巷" style="width: 300px; height: 30px; margin: 20px 0 0 0;" />
             <input type="button" id="search_address" value="搜索" style="width: 60px; height: 30px;" />
             <br />
             <span id="lng" style="width: 60px; margin: 12px 0 6px 20px; font-size: 14px; color: #808080;">经度：</span><br />
             <span id="lat" style="width: 60px; margin: 12px 0 6px 20px; font-size: 14px; color: #808080;">纬度：</span>
         </div>
         <div style="width: 500px; height: 500px; border: 1px solid; float: left; margin-left: 200px;">
             <span style="width: 60px; margin: 12px 0 6px 20px; font-size: 14px; color: #808080;">经度：</span>
             <input type="text" value="" placeholder="104.05033320413" id="txtlng" style="width: 300px; height: 20px; margin: 20px 0 0 0;" />
             <br />
             <span style="width: 60px; margin: 12px 0 6px 20px; font-size: 14px; color: #808080;">纬度：</span>
             <input type="text" value="" placeholder="30.68458575873" id="txtlat" style="width: 300px; height: 20px; margin: 20px 0 0 0;" />
             <br />
             <input type="button" id="search_lng_lat" value="搜索" style="height: 30px; margin-top: 12px; margin-left: 220px;" /><br />
             <span id="spanadderss" style="width: 60px; margin: 12px 0 6px 20px; font-size: 14px; color: #808080;">地址：</span>
         </div>
     </form>

  $(document).ready(function () {
             /*
             根据地址信息获取经纬度,返回json对象：
                 status    Int    返回结果状态值，成功返回0。
                 location object    经纬度坐标
                     lat    float    纬度值
                     lng    float    经度值
                 precise    Int    位置的附加信息，是否精确查找。1为精确查找，0为不精确。
                 confidence    Int    可信度
                 level    string    地址类型

             {
                 status: 0,
                 result:
                 {
                     location:
                     {
                         lng: 116.30814954222,
                         lat: 40.056885091681
                     },
                 precise: 1,
                 confidence: 80,
                 level: "商务大厦"
                 }
             }
             */
             $('#search_address').click(function () {
                 var address = $.trim($('#address').val());
                 if (address != undefined && address != '') {
                     var url = 'http://api.map.baidu.com/geocoder/v2/?ak=eIxDStjzbtH0WtU50gqdXYCz&output=json&address=' + encodeURIComponent(address);
                     //根据地点名称获取经纬度信息
                     $.ajax({
                         type: "POST",
                         url: url,
                         dataType: "JSONP",
                         success: function (data) {
                             if (parseInt(data.status) == 0) {
                                 $("#lng").html("经度：" + data.result.location.lng);
                                 $("#lat").html("纬度：" + data.result.location.lat);
                             }
                         }
                     });
                 }
             });
             /*
             根据经纬度获取详细地址及其周边信息，返回json对象：
                 status    constant    返回结果状态值， 成功返回0，其他值请查看附录。
                 location
                     lat    纬度坐标
                     lng    经度坐标
                 formatted_address    结构化地址信息
                 business    所在商圈信息，如 "人民大学,中关村,苏州街"
                 addressComponent    city    城市名
                     district    区县名
                     province    省名
                     street    街道名
                     street_number    街道门牌号
                 pois（周边poi数组）
                     addr    地址信息
                     cp    数据来源
                     distance    离坐标点距离
                     name    poi名称
                     poiType    poi类型，如’ 办公大厦,商务大厦’
                     point    poi坐标{x,y}
                     tel    电话
                     uid    poi唯一标识
                     zip    邮编
             */
             $('#search_lng_lat').click(function () {
                 var lng = $.trim($('#txtlng').val());
                 var lat = $.trim($('#txtlat').val());
                 var url = 'http://api.map.baidu.com/geocoder/v2/?ak=eIxDStjzbtH0WtU50gqdXYCz&output=json&pois=1&location=' + lat + "," + lng;
                 $.ajax({
                     type: "POST",
                     url: url,
                     dataType: "JSONP",
                     success: function (data) {
                         if (parseInt(data.status) == 0) {
                             var result = "地址：" + data.result.formatted_address + "</br>";
                             result += "省名:" + data.result.addressComponent.province + "</br>";
                             result += "城市名:" + data.result.addressComponent.city + "</br>";
                             result += "区县名:" + data.result.addressComponent.district + "</br>";
                             result += "街道名:" + data.result.addressComponent.street + "</br>";
                             result += "街道门牌号:" + data.result.addressComponent.street_number + "</br>";
                             result += "周边信息：</br>";
                             for (var i = 0; i < data.result.pois.length; i++) {
                                 result += "地址信息:" + data.result.pois[i].addr
                                     + ",数据来源:" + data.result.pois[i].cp
                                     + ",离坐标点距离:" + data.result.pois[i].distance
                                     + ",poi名称:" + data.result.pois[i].name
                                     + ",poi类型:" + data.result.pois[i].poiType
                                     + ",poi坐标x:" + data.result.pois[i].point.x
                                     + ",poi坐标y:" + data.result.pois[i].point.y
                                     + ",电话:" + data.result.pois[i].tel
                                     + ",poi唯一标识:" + data.result.pois[i].uid
                                     + ",邮编:" + data.result.pois[i].zip + "</br>";
                             }
                             $('#spanadderss').html(result);
                         }
                     }
                 });
             });
         });

　　代码中已经有详细的解释了，若果实在不懂的话，就点击API地址，这里面更详细。这里只是个人的知识整理，只做为一个记录，若对你能有什么帮助，那我也感到十分高兴。