【高德地图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("北京市海淀区苏州街"); 
});

效果图:

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); 
});

效果图:

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

时间: 2024-12-15 01:38:19

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

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

摘要:关于定位,分为GPS定位和网络定位2种.GPS定位,精度较高,可达到10米,但室内不可用,且超级费电.网络定位,分为wifi定位和基站定位,都是通过获取wifi或者基站信息,然后查询对应的wifi或者基站位置数据库,得到的定位地点.定位数据库可以不断完善不断补充,所以,越定位越准确.本文详细描述了,如果使用高德JS API来实现位置定位.城市定位的方法,包含了IP定位,浏览器定位,检索定位等多种网络定位方法.当然,如果您的手机有GPS功能,那么使用浏览器定位的时候,会自动获取GPS信息,使

【高德地图API】从零开始学高德JS API(四)搜索服务

摘要:地图服务,大家能想到哪些?POI搜素,输入提示,地址解析,公交导航,驾车导航,步行导航,道路查询(交叉口),行政区划等等.如果说覆盖物Marker是地图的骨骼,那么服务,就是地图的气血.有个各种各样的地图服务,我们的地图应用才能变得有血有肉,活灵活现.第四篇拆成了几个要点,本篇主要讲搜索服务.包括周边搜索,关键词搜索,范围搜索,搜索提示(自动完成,输入提示),行政区域,交叉路口,检索自有数据(云图). demo:http://zhaoziang.com/amap/zero_4_1.html

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

摘要:无论是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装的一系列更加便于开发者使用,减少开发者工作量的二级API接口.除了官方通用的鱼骨.鹰眼控件,还有大量官方开发的地图插件,类似谷歌的lib.当然本文还会介绍自定义插件的使用. ------------------------------------------------------------------------------------------------- 第一部分 控件 目前官方支持的控件包含:缩放控制条-地图

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

先来看两个问题:路线规划与导航有什么区别?步行导航与驾车导航有什么区别? 回答: 1.路线规划,指的是为用户提供3条路线推荐.[高德]在提供路线规划的时候,会提供用户自定义路线规划功能,这是别家没有做到的.导航,指的是为驾车用户提示路口信息,向左向右,进入匝道等信息. 2.我们这里说的步行导航和驾车导航,严格的说,应该是路线规划.从A地到B地,如果是驾车,路线规划会将公路路网做为搜索数据:如果是步行,过街天桥.地下通道.人行道做为搜索数据. ---------------------------

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

摘要: 地图服务,大家能想到哪些?POI搜素,输入提示,地址解析,公交导航,驾车导航,步行导航,道路查询(交叉口),行政区划等等.如果说覆盖物Marker是地图的骨骼,那么服务,就是地图的气血.有个各种各样的地图服务,我们的地图应用才能变得有血有肉,活灵活现. 第四篇拆成了几个要点,本篇主要讲搜索服务.包括周边搜索,关键词搜索,范围搜索,搜索提示(自动完成,输入提示),行政区域,交叉路口,检索自有数据(云图). demo:http://zhaoziang.com/amap/zero_4_1.ht

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

下面是基于KWIC 的关键字匹配算法(管道+过滤器模式下实现) 关键部分的管道+过滤器 软件体系下的实现, 在很多的关键字搜索平台都使用了这一 循环移位+排序输出的 关键字匹配算法: 具体需求如下: 1.使用管道-过滤器风格: 每个过滤器处理数据,然后将结果送至下一个过滤器,.要有数据传入,过滤器即开始工作.过滤器之间的数据共享被严格限制在管道传输 四个过滤器: 输入(Input filter): 从数据源读取输入文件,解析格式,将行写入输出管道 移位(CircularShifter filte

【高德地图API】从零开始学高德JS API(一)地图展现

摘要:关于地图的显示,我想大家最关心的就是麻点图,自定义底图的解决方案了吧.在过去,marker大于500之后,浏览器开始逐渐卡死,大家都开始寻找解决方案,比如聚合marker啊,比如麻点图啊.聚合marker里面还有一些复杂的算法,而麻点图,最让大家头疼的,就是如何生成麻点图,如何切图,如何把图片贴到地图上,还有如何定位图片的位置吧.以前那么复杂的一系列操作,居然让云图的可视化操作一下子解决了.现在只要点一点鼠标,麻点图就自动生成了.真是广大LBS开发者的福音. 以前写过从零开始学百度地图AP

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

覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的地图.在一张地图上,除了底层的底图(瓦片图,矢量图),控件(有功能可操作的工具),最重要最不可缺少的就是覆盖物了.覆盖物有多种,包括,标注.折线.多边形.信息窗口.聚合marker.麻点图和图片覆盖物.本文会详细介绍每一种覆盖物的概念,添加方法,修改方法,移除方法等.最后会提供示例和源代码下载. 示例demo:http://zhaoziang.com/amap/zero_3_1.html ----------------------------

【高德地图API】从零开始学高德JS API(三)覆盖物

摘要:覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的地图.在一张地图上,除了底层的底图(瓦片图,矢量图),控件(有功能可操作的工具),最重要最不可缺少的就是覆盖物了.覆盖物有多种,包括,标注.折线.多边形.信息窗口.聚合marker.麻点图和图片覆盖物.本文会详细介绍每一种覆盖物的概念,添加方法,修改方法,移除方法等.最后会提供示例和源代码下载. 示例demo:http://zhaoziang.com/amap/zero_3_1.html -------------------------

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

原文:[高德地图API]从零开始学高德JS API(六)--坐标转换 摘要:如何从GPS转到谷歌?如何从百度转到高德?这些都是小case.我们还提供,如何将基站cell_id转换为GPS坐标? ----------------------------------------------------------------------------------------- 第一部分 各种坐标系详解 1.大地坐标系统 WGS-84 用来表述地球上点的位置的一种地区坐标系统.它采用一个十分近似于地球自