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

摘要:
地址解析,就是将地址转换为经纬度。地址解析功能,实用性强,调用频次高,谷歌API的地址解析接口甚至是收费的!---------------------------------------------------------------------------使用高德提供的AMap.Geocoder插件即可实现地址解析,和逆地址解析。

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

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

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

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

1、地理编码

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

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

代码:

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

效果图:

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

2、逆地理编码

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

geocoder.getAddress(lnglatXY); 

代码:

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

效果图:

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

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">
varmapObj;
varresult;
varmarker =[];
varwindowsArr =[];
functionmapInit () {
    mapObj = newAMap.Map('iCenter');    //默认定位:初始化加载地图时,center及level属性缺省,地图默认显示用户所在城市范围
};
varMGeocoder;
varkey_11;
varkey_12;
varkey_2;
functiongeocoder2() {  //POI搜索,关键字查询
key_11 =document.getElementById("key_11").value;
    key_12 =document.getElementById("key_12").value;
    varlnglatXY = newAMap.LngLat(key_11,key_12);
    //document.getElementById('result').innerHTML = "您输入的是:" + key_1;
    //加载地理编码插件
mapObj.plugin(["AMap.Geocoder"], function() {       
        MGeocoder = newAMap.Geocoder({
            radius: 1000,
            extensions: "all"
        });
        //返回地理编码结果
AMap.event.addListener(MGeocoder, "complete", geocoder_CallBack2);
        //逆地理编码
MGeocoder.getAddress(lnglatXY);
    });
    //加点
    varmarker = newAMap.Marker({
        map:mapObj,
        icon: newAMap.Icon({
            image: "http://api.amap.com/Public/images/js/mark.png",
            size:newAMap.Size(58,30),
            imageOffset: newAMap.Pixel(-32, -0)
        }),
        position: lnglatXY,
        offset: newAMap.Pixel(-5,-30)
    });
    mapObj.setFitView();
}
//鼠标划过显示相应点
varmarker2;
functiononMouseOver (e) {
    varcoor =e.split(','),
        lnglat = newAMap.LngLat(coor[0], coor[1]);
    if(!marker2) {
        marker2 = newAMap.Marker({
            map:mapObj,
            icon: "http://webapi.amap.com/images/0.png",
            position: lnglat,
            offset: newAMap.Pixel(-10, -34)
        });
    } else{
        marker2.setPosition(lnglat);
    }
    mapObj.setFitView();
}
functiongeocoder_CallBack2(data) { //回调函数
    varresultStr = "";
    varroadinfo ="";
    varpoiinfo="";
    varaddress;
    //返回地址描述
address =data.regeocode.formattedAddress;
    //返回周边道路信息
roadinfo +="<table style='600px'>";
    for(vari=0;i<data.regeocode.roads.length;i++){
        varcolor =(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='600px;cursor:pointer;'>";
    for(varj=0;j<data.regeocode.pois.length;j++){
        varcolor =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;
} 
functiongeocoder() {  //地理编码返回结果展示
key_2 =document.getElementById("key_2").value;      
    mapObj.plugin(["AMap.Geocoder"], function() {     //加载地理编码插件
MGeocoder = newAMap.Geocoder();
        //返回地理编码结果
AMap.event.addListener(MGeocoder, "complete", geocoder_CallBack);        
        MGeocoder.getLocation(key_2);  //地理编码
});
} 
//地理编码返回结果展示  
functiongeocoder_CallBack(data){
    varresultStr="";
    //地理编码结果数组
    vargeocode = newArray();
    geocode =data.geocodes; 
    for(vari = 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; 
} 
functionaddmarker(i, d) {
    varlngX =d.location.getLng();
    varlatY =d.location.getLat();
    varmarkerOption ={
        map:mapObj,                
        icon:"http://webapi.amap.com/images/"+(i+1)+".png", 
        position:newAMap.LngLat(lngX, latY)
    };           
    varmar = newAMap.Marker(markerOption); 
    marker.push(newAMap.LngLat(lngX, latY));
    varinfoWindow = newAMap.InfoWindow({ 
        content:d.formattedAddress,
        autoMove:true,
        size:newAMap.Size(150,0), 
        offset:{x:0,y:-30}
    }); 
    windowsArr.push(infoWindow); 
    varaa = 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(八)——地址解析与逆地址解析》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇ThreeJS之动画交互逻辑及特效uboot常用命令详解下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

转义、编码和加密

转义、编码和加密是开发中很常见也很基础的概念。对于初学开发的开发者,可能有时会无法准确的区分着几个词。我们将通过这篇文章来了解一下“转义、编码和加密”这几个词的关联和区别。 转义 第一种转义场景 绝大多数的开发者都曾经在自己学习第一个编程语言时,就遇到了这个概念。以经典的C语言中字符串中的字符转义为例。 如果在一个字符串中存在一个",那么就需要在"前添加才...

asp.net(C#) 编码解码(HtmlEncode与HtmlEncode)

Default.aspx <%@PageValidateRequest="false"Language="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="test_Default"%><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Tr...

JS全局添加token

全局添加token var token = sessionStorage.getItem("UserTocken"); if(token){ $.ajaxSetup({ //发送请求前触发 beforeSend: function(xhr) { //可以设置自定义标头 xhr....

C#、Java和JS实现SHA256+BASE64加密总结

C#、Java和JS实现SHA256+BASE64加密总结--莫非(www.muphy.me) 原理 首先,通过编码格式(UTF-8、ASCII等,如果含有汉字等字符,编码格式不同加密结果也不同)获得加密字符串的字节数组,再计算字节数组的哈希值数组,再把hash数组转换为base64编码的字符串。 C#实例 class Program {//转...

js回调与异步加载的用法

以前还是菜鸟的时候(虽然现在依然很菜 -_-|| )对异步加载与回调函数的技术无比向往,但也一直没有使用过,这次因为页面逻辑太过复杂,一堆请求逻辑,如果还是用顺序请求,页面的速度。。。 领导又要挠头了。 人是被逼出来的,所以去研究下异步与回调,以下只是本人自己见解啊,用来自己回忆的,不喜勿喷: 额。。。额。。。算了,打字好麻烦,直接上代码吧,又不是看不懂...

最全前端资源汇集(引)

综合类地址 前端知识体系http://www.cnblogs.com/sb1987... 前端知识结构https://github.com/JacksonTia... Web前端开发大系概览https://github.com/unruledboy... Web前端开发大系概览-中文版http://www.cnblogs.com/unrule... Web...