最近项目中会用到将地址转换为经纬的。从出来,还一直未遇到过这类问题,下来自己提前学习了,将自己所学的记录在案。
在网上找了很多资料,最后确定了,百度的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>