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

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

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

  上图是一个原理,即当我们传入对应的值时,返回对应的信息。这里我现在了返回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>
View Code

相关文章:

  • 2021-12-06
  • 2021-11-25
  • 2021-12-06
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-11-18
  • 2022-12-23
猜你喜欢
  • 2022-01-01
  • 2021-12-13
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-02-06
  • 2022-01-19
相关资源
相似解决方案