【高德地图API】从零开始学高德JS API(八)——地址解析与逆地址解析

时间:2023-01-02 12:22:25

原文:【高德地图API】从零开始学高德JS API(八)——地址解析与逆地址解析

摘要:无论是百度LBS开放平台,还是高德LBS开放平台,其调用量最高的接口,必然是定位,其次就是地址解析了,又称为地理编码。地址解析,就是将地址转换为经纬度。而逆地址解析,就是将经纬度转换为地址。经纬度一般是由专业测绘机构用GPS采集,然后使用国测局接口加密,最后呈现在互联网地图上的。而地址,这里说的是结构化的带街道门牌号的地址,比如“北京市朝阳区阜通东大街6号”,这个地址是由*局颁发的。而将地址和经纬度一一对应起来,这个就是高德地图做的事情了,也就是地址解析接口的功能了。地址解析功能,实用性强,调用频次高,谷歌API的地址解析接口甚至是收费的!所以,现在有现成免费的接口,大家应该很开心呀。

---------------------------------------------------------------------------

使用高德提供的AMap.Geocoder插件即可实现地址解析,和逆地址解析。

地理编码类是指将地址信息和地理坐标点信息进行相互转化,包括将地址信息转换为地理坐标点的编码和将地理坐标点转换为地址信息的逆地理编码。

1、地理编码

地理编码是将地址信息转换为地理坐标点信息,你可以使用此项功能在指定位置添加一个点或是定位地图上的某个位置。接口为:

geocoder.getLocation("北京市海淀区苏州街"); 

代码:

var geocoder;
//加载地理编码插件
mapObj.plugin(["AMap.Geocoder"],function(){
geocoder=new AMap.Geocoder({
radius:1000, //以已知坐标为中心点,radius为半径,返回范围内兴趣点和道路信息
city:"010"//城市,默认:"全国"
});
//返回地理编码结果
AMap . event . addListener(geocoder, "complete",geocoder_callBack);
geocoder.getLocation("北京市海淀区苏州街");
});

效果图:

【高德地图API】从零开始学高德JS API(八)——地址解析与逆地址解析

2、逆地理编码

逆地理编码又称位置描述或地址解析,即从已知的经纬度坐标到对应的地址描述(如省市、街区、楼层、房间等)的转换。接口为:

geocoder.getAddress(lnglatXY); 

代码:

var geocoder;
var lnglatXY=new AMap.LngLat(116.396574,39.992706);
//加载地理编码插件
mapObj.plugin(["AMap.Geocoder"],function(){
geocoder=new AMap.Geocoder({
radius:1000, //以已知坐标为中心点,radius为半径,返回范围内兴趣点和道路信息
extensions: "all"//返回地址描述以及附近兴趣点和道路信息,默认"base"
});
//返回地理编码结果
AMap . event . addListener(geocoder, "complete",geocoder_callBack);
//逆地理编码
geocoder.getAddress(lnglatXY);
});

效果图:

【高德地图API】从零开始学高德JS API(八)——地址解析与逆地址解析

3、全部源代码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>地址解析</title>
<link rel="stylesheet" type="text/css" href="zero.css" />
<script language="javascript" src="http://webapi.amap.com/maps?v=1.3&key=【您的key】"></script>
</head>
<body onLoad="mapInit()">
<div id="iCenter"></div>
<div id="iControlbox">
<ul>
<li>
<input type="text" id="key_11" value="116.51413" />
<input type="text" id="key_12" value="39.912896" />
<button onclick="javascript:geocoder2();">逆地址解析</button>
</li>
<li>
<input type="text" id="key_2" value="北京市朝阳区大屯路304号" />
<button onclick="javascript:geocoder();">地址解析</button>
</li>
</ul>
</div>
<div id="result"></div>
</body>
<script language="javascript">
var mapObj;
var result;
var marker = [];
var windowsArr = [];
function mapInit () {
mapObj = new AMap.Map('iCenter'); //默认定位:初始化加载地图时,center及level属性缺省,地图默认显示用户所在城市范围
};
var MGeocoder;
var key_11;
var key_12;
var key_2;
function geocoder2() { //POI搜索,关键字查询
key_11 = document.getElementById("key_11").value;
key_12 = document.getElementById("key_12").value;
var lnglatXY = new AMap.LngLat(key_11,key_12);
//document.getElementById('result').innerHTML = "您输入的是:" + key_1;
//加载地理编码插件
mapObj.plugin(["AMap.Geocoder"], function() {
MGeocoder = new AMap.Geocoder({
radius: 1000,
extensions: "all"
});
//返回地理编码结果
AMap.event.addListener(MGeocoder, "complete", geocoder_CallBack2);
//逆地理编码
MGeocoder.getAddress(lnglatXY);
});
//加点
var marker = new AMap.Marker({
map:mapObj,
icon: new AMap.Icon({
image: "http://api.amap.com/Public/images/js/mark.png",
size:new AMap.Size(58,30),
imageOffset: new AMap.Pixel(-32, -0)
}),
position: lnglatXY,
offset: new AMap.Pixel(-5,-30)
});
mapObj.setFitView();
}
//鼠标划过显示相应点
var marker2;
function onMouseOver (e) {
var coor = e.split(','),
lnglat = new AMap.LngLat(coor[0], coor[1]);
if (!marker2) {
marker2 = new AMap.Marker({
map:mapObj,
icon: "http://webapi.amap.com/images/0.png",
position: lnglat,
offset: new AMap.Pixel(-10, -34)
});
} else {
marker2.setPosition(lnglat);
}
mapObj.setFitView();
}
function geocoder_CallBack2(data) { //回调函数
var resultStr = "";
var roadinfo ="";
var poiinfo="";
var address;
//返回地址描述
address = data.regeocode.formattedAddress;
//返回周边道路信息
roadinfo +="<table style='width:600px'>";
for(var i=0;i<data.regeocode.roads.length;i++){
var color = (i % 2 === 0 ? '#fff' : '#eee');
roadinfo += "<tr style='background-color:" + color + "; margin:0; padding:0;'><td>道路:" + data.regeocode.roads[i].name + "</td><td>方向:" + data.regeocode.roads[i].direction + "</td><td>距离:" + data.regeocode.roads[i].distance + "米</td></tr>";
}
roadinfo +="</table>"
//返回周边兴趣点信息
poiinfo += "<table style='width:600px;cursor:pointer;'>";
for(var j=0;j<data.regeocode.pois.length;j++){
var color = j % 2 === 0 ? '#fff' : '#eee';
poiinfo += "<tr onmouseover='onMouseOver(\"" + data.regeocode.pois[j].location.toString() + "\")' style='background-color:" + color + "; margin:0; padding:0;'><td>兴趣点:" + data.regeocode.pois[j].name + "</td><td>类型:" + data.regeocode.pois[j].type + "</td><td>距离:" + data.regeocode.pois[j].distance + "米</td></tr>";
}
poiinfo += "</table>";
//返回结果拼接输出
resultStr = "<div style=\"font-size: 12px;padding:0px 0 4px 2px; border-bottom:1px solid #C1FFC1;\">"+"<b>地址</b>:"+ address + "<hr/><b>周边道路信息</b>:<br/>" + roadinfo + "<hr/><b>周边兴趣点信息</b>:<br/>" + poiinfo +"</div>";
document.getElementById("result").innerHTML = resultStr;
} function geocoder() { //地理编码返回结果展示
key_2 = document.getElementById("key_2").value;
mapObj.plugin(["AMap.Geocoder"], function() { //加载地理编码插件
MGeocoder = new AMap.Geocoder();
//返回地理编码结果
AMap.event.addListener(MGeocoder, "complete", geocoder_CallBack);
MGeocoder.getLocation(key_2); //地理编码
});
}
//地理编码返回结果展示
function geocoder_CallBack(data){
var resultStr="";
//地理编码结果数组
var geocode = new Array();
geocode = data.geocodes;
for (var i = 0; i < geocode.length; i++) {
//拼接输出html
resultStr += "<span style=\"font-size: 12px;padding:0px 0 4px 2px; border-bottom:1px solid #C1FFC1;\">"+"<b>地址</b>:"+geocode[i].formattedAddress+""+ "<b> 坐标</b>:" + geocode[i].location.getLng() +", "+ geocode[i].location.getLat() +""+ "<b> 匹配级别</b>:" + geocode[i].level +"</span>";
addmarker(i, geocode[i]);
}
mapObj.setFitView();
document.getElementById("result").innerHTML = resultStr;
}
function addmarker(i, d) {
var lngX = d.location.getLng();
var latY = d.location.getLat();
var markerOption = {
map:mapObj,
icon:"http://webapi.amap.com/images/"+(i+1)+".png",
position:new AMap.LngLat(lngX, latY)
};
var mar = new AMap.Marker(markerOption);
marker.push(new AMap.LngLat(lngX, latY)); var infoWindow = new AMap.InfoWindow({
content:d.formattedAddress,
autoMove:true,
size:new AMap.Size(150,0),
offset:{x:0,y:-30}
});
windowsArr.push(infoWindow); var aa = function(e){infoWindow.open(mapObj,mar.getPosition());};
AMap.event.addListener(mar,"click",aa);
}
</script>
</html>

demo地址:http://zhaoziang.com/amap/zero_8_1.html

【高德地图API】从零开始学高德JS API(八)——地址解析与逆地址解析的更多相关文章

  1. 【高德地图API】从零开始学高德JS API(七)——定位方式大揭秘

    原文:[高德地图API]从零开始学高德JS API(七)——定位方式大揭秘 摘要:关于定位,分为GPS定位和网络定位2种.GPS定位,精度较高,可达到10米,但室内不可用,且超级费电.网络定位,分为w ...

  2. 【高德地图API】从零开始学高德JS API(六)——坐标转换

    原文:[高德地图API]从零开始学高德JS API(六)——坐标转换 摘要:如何从GPS转到谷歌?如何从百度转到高德?这些都是小case.我们还提供,如何将基站cell_id转换为GPS坐标? --- ...

  3. 【高德地图API】从零开始学高德JS API(五)路线规划——驾车&vert;公交&vert;步行

    原文:[高德地图API]从零开始学高德JS API(五)路线规划——驾车|公交|步行 先来看两个问题:路线规划与导航有什么区别?步行导航与驾车导航有什么区别? 回答: 1.路线规划,指的是为用户提供3 ...

  4. 【高德地图API】从零开始学高德JS API(四)搜索服务——POI搜索&vert;自动完成&vert;输入提示&vert;行政区域&vert;交叉路口&vert;自有数据检索

    原文:[高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索 摘要:地图服务,大家能想到哪些?POI搜素,输入提示,地址解析,公 ...

  5. 【高德地图API】从零开始学高德JS API(三)覆盖物——标注&vert;折线&vert;多边形&vert;信息窗口&vert;聚合marker&vert;麻点图&vert;图片覆盖物

    原文:[高德地图API]从零开始学高德JS API(三)覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物 摘要:覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的地图.在 ...

  6. 【高德地图API】从零开始学高德JS API(二)地图控件与插件——测距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨

    原文:[高德地图API]从零开始学高德JS API(二)地图控件与插件——测距.圆形编辑器.鼠标工具.地图类型切换.鹰眼鱼骨 摘要:无论是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装 ...

  7. 【高德地图API】从零开始学高德JS API(一)地图展现——仙剑地图,麻点图,街景,室内图

    原文:[高德地图API]从零开始学高德JS API(一)地图展现——仙剑地图,麻点图,街景,室内图 摘要:关于地图的显示,我想大家最关心的就是麻点图,自定义底图的解决方案了吧.在过去,marker大于 ...

  8. 从零开始学习Node&period;js例子八 使用SQLite3和MongoDB

    setup.js:初始化数据库 var util = require('util'); var async = require('async'); //npm install async var no ...

  9. 从零开始学ios开发(八):Autorotation and Autosizing

    不好意思,这一篇间隔的时间有点长,最近实在是事情太多,耽搁了,好了,长话短说,下面继续学习ios. 这次学习的内容是Autorotation和Autosizing,Autorotation就是屏幕内容 ...

随机推荐

  1. cygwin配置git

    对于windows用户来说,使用git bash经常会出现乱码情况,那么一款优质高尚的软件,值得推荐一下了,那就是cygwin 下载cygwin后,在安装过程中,安装git,安装vim编辑器 然后会在 ...

  2. Octopus系列之价格计算公式

    百分比:在原价的基础上优惠5%,相当于95%折销售实际价格:最后实际销售的价格[基准价格:如果有特价就基于特价,没有特价基于原价]优惠金额:减少的金额 批量优惠 百分比: 原价*(1-5%)的算法实际 ...

  3. &lbrack;Xamarin&rsqb; 使用LayoutInflater&period;Inflate載入預先設計好的Layout並使用 (转帖)

    開發的時候,一定會把一些東西設計成元件,並且可以多次使用,今天紀錄一篇比較簡單的方法,可以載入事先做好的Layout 並且給予事件 介紹一下範例: Main.axml: <?xml versio ...

  4. 转载~vim配置文件

    转载自:小码哥的博客 花了很长时间整理的,感觉用起来很方便,共享一下. 我的vim配置主要有以下优点: 1.按F5可以直接编译并执行C.C++.java代码以及执行shell脚本,按“F8”可进行C. ...

  5. ARC的内存管理

        在objective-c中,内存的引用计数一直是一个让人比较头疼的问题.尤其是当引用计数涉及到arc.blocks等等的时候.似乎ARC的出现只是让我们解放了双手,由于底层实现依然依赖引用计数 ...

  6. POJ 1737 统计有n个顶点的连通图有多少个 (带标号)

    设f(n)为所求答案 g(n)为n个顶点的非联通图 则f(n) + g(n) = h(n) = 2^(n * (n - 1) / 2) 其中h(n)是n个顶点的联图的个数 这样计算 先考虑1所在的连通 ...

  7. UESTC&lowbar;秋实大哥与时空漫游 2015 UESTC Training for Graph Theory&lt&semi;Problem C&gt&semi;

    C - 秋实大哥与时空漫游 Time Limit: 4500/1500MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) Su ...

  8. Windows Server 2016-查询FSMO角色信息的三种方法

    FSMO操作主机角色有五种:林范围操作主机角色有两种,分别是 架构主机角色(Schema Master)和 域命名主机角色(Domain Naming Master):及域范围操作主机角色三种,分别是 ...

  9. 最长上升子序列(LIS)

    (我先扯些没用的) 我这个笨孩子 学点东西好慢好慢的 我还贪玩 于是 将自己陷入了一个超级超级超级差的境地 可 我还傻乎乎的保有着天真的梦想(理想?) 所以现在我要加倍的努力努力再努力了 只能嘎油了 ...

  10. C&num;设计模式之9:模板方法

    模板方法 模板方法是一个方法,定义了算法的步骤,并允许子类为一个或多个步骤提供实现. 本例中用冲泡咖啡和茶的例子来说明: 上图说明了冲泡咖啡和茶的步骤,可以看出冲泡咖啡和茶的步骤差不多,很相似,先来看 ...