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

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

  在网上找了很多资料,最后确定了,百度的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地址,这里面更详细。这里只是个人的知识整理,只做为一个记录,若对你能有什么帮助,那我也感到十分高兴。

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

时间: 2024-10-13 23:31:23

javascript实现经纬度与地址的互转的相关文章

iOS开发之 使用CLGeocoder实现经纬度和地址互查

添加CoreLocation.framework框架 导入#import <CoreLocation/CoreLocation.h> 通过地址查询经纬度方法:     CLGeocoder *geocoder = [[CLGeocoder alloc] init];     [geocoder geocodeAddressString:@"湖北襄阳" completionHandler:^(NSArray* placemarks, NSError* error){     

Javascript版选择下拉菜单互移且排序

效果图如下: 代码如下: <html> <head> <title>Javascript版选择下拉菜单互移且排序</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <body> <p>选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选),

C#微信开发之旅(七):根据经纬度获取地址(百度地图Api)

开发过程中遇到这样的需求,根据用户的地理位置不同,显示不同区域的产品. 这里用到了微信:获取用户地理位置 的功能,(每隔5秒上报 或 进入回话时上报一次),我们根据微信推送过来的经纬度,来转换成实际地址,这里用到的是百度地图Api(要用的话先申请百度ak). PS:微信的这个功能很不稳定,靠它不靠谱,经常不推送...(后来加了手动定位,百度地图Web定位组件 还不错,不是广告!0.0) #region 根据经纬度 获取地址信息 BaiduApi /// <summary> /// 根据经纬度

百度转换经纬度为地址

1 /** 2 * 通过百度转换经纬度为地址信息 3 * 4 * @param longitude 经度 5 * @param latitude 纬度 6 * @param coordtype 坐标体系:<br/> 7 * <ul> 8 * <li>bd09ll 百度墨卡托坐标</li> 9 * <li>gcj02ll 国测局墨卡托坐标</li> 10 * <li>wgs84ll GPS经纬度</li> 11

ios系统经纬度转百度经纬度及经纬度转地址

正在进行的项目中有这样的需求:定位获得当前经纬度,再用百度Place API使用经纬度查询周边信息.这里不需要显示地图,只需要定位.看似思路很顺畅,做起来却不容易. iPhone的GPS定位(CLLocationManager)获得的经纬坐标是基于WGS-84坐标系(世界标准),Google地图使用的是GCJ-02坐标系(中国特色的火星坐标系),这就是为什么获得的经纬坐标在google地图上会发生偏移.我项目需求是使用百度Place API,百度的经纬坐标在GCJ-02的基础上再做了次加密,就是

Javascript 手机号码验证 邮箱地址验证

实例: //验证手机号码         function Checkthis() {             var txtmobile = document.getElementById("txtMobile").value;             var reg = new RegExp("(^0{0,1}1[3|4|5|6|7|8|9][0-9]{9}$)");             if (reg.test(txtmobile)) {         

百度地图的反地址解析(通过经纬度查询地址信息)

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script type="text/javascript" src="./jquery-1.4.2.min.js"></script> <!-- 这里的引用有ak和没有ak的区别暂时还没有弄清楚

根据省份等地址获取经纬度,或根据经纬度获取地址信息

在web开发涉及地图操作的时候或者移动客户端开发中有时候有以下需求: 下面主要记录通过百度提供的API的一个解决方案: 在百度开发平台中提供了这样一个叫Geocoding 的API,这个API用于提供从地址到经纬度坐标或者从经纬度坐标到地址的转换服务,使用的是http协议,返回JSON或者XML数据. 地理编码:即地址解析,由详细到街道的结构化地址得到百度经纬度信息,例如:“北京市海淀区中关村南大街27号”地址解析的结果是“lng:116.31985,lat:39.959836”.同时,地理编码

使用javascript生成当前博文地址的二维码图片

前面的话 在电脑端发现一篇好的博文,想在手机上访问.这时,就必须打开手机浏览器输入长长的URL地址才行,非常不方便.如果在博客标题的后面跟一张小的图片,点击该图片后,出现一张二维码的大图,然后再通过手机扫一扫,来进行博文的访问,就相对方便很多. 通过搜索引擎搜索了一些生成二维码的文章,发现其并不是一件容易的事.同时,也发现了qrcode插件,该插件专门用于生成二维码.于是,在qrcode的基础上,实现了一个二维码插件qr 效果演示 如果细心的话,会发现该博文标题的后面紧跟着一个表示二维码的手机小