【高德地图API】从零开始学高德JS API（八）—

原文:【高德地图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

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

【高德地图API】从零开始学高德JS API（七）——定位方式大揭秘
原文:[高德地图API]从零开始学高德JS API(七)——定位方式大揭秘摘要:关于定位,分为GPS定位和网络定位2种.GPS定位,精度较高,可达到10米,但室内不可用,且超级费电.网络定位,分为w ...
【高德地图API】从零开始学高德JS API（六）——坐标转换
原文:[高德地图API]从零开始学高德JS API(六)——坐标转换摘要:如何从GPS转到谷歌?如何从百度转到高德?这些都是小case.我们还提供,如何将基站cell_id转换为GPS坐标? --- ...
【高德地图API】从零开始学高德JS API（五）路线规划——驾车|公交|步行
原文:[高德地图API]从零开始学高德JS API(五)路线规划——驾车|公交|步行先来看两个问题:路线规划与导航有什么区别?步行导航与驾车导航有什么区别? 回答: 1.路线规划,指的是为用户提供3 ...
【高德地图API】从零开始学高德JS API（四）搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索
原文:[高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索摘要:地图服务,大家能想到哪些?POI搜素,输入提示,地址解析,公 ...
【高德地图API】从零开始学高德JS API（三）覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物
原文:[高德地图API]从零开始学高德JS API(三)覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物摘要:覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的地图.在 ...
【高德地图API】从零开始学高德JS API（二）地图控件与插件——测距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨
原文:[高德地图API]从零开始学高德JS API(二)地图控件与插件——测距.圆形编辑器.鼠标工具.地图类型切换.鹰眼鱼骨摘要:无论是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装 ...
【高德地图API】从零开始学高德JS API（一）地图展现——仙剑地图，麻点图，街景，室内图
原文:[高德地图API]从零开始学高德JS API(一)地图展现——仙剑地图,麻点图,街景,室内图摘要:关于地图的显示,我想大家最关心的就是麻点图,自定义底图的解决方案了吧.在过去,marker大于 ...
从零开始学习Node.js例子八使用SQLite3和MongoDB
setup.js:初始化数据库 var util = require('util'); var async = require('async'); //npm install async var no ...
从零开始学ios开发（八）：Autorotation and Autosizing
不好意思,这一篇间隔的时间有点长,最近实在是事情太多,耽搁了,好了,长话短说,下面继续学习ios. 这次学习的内容是Autorotation和Autosizing,Autorotation就是屏幕内容 ...

随机推荐

Codeforces Round #234 (Div. 2) B. Inna and New Matrix of Candies
B. Inna and New Matrix of Candies time limit per test 1 second memory limit per test 256 megabytes i ...
妈蛋：kinMaxShow旋转木马异常，WebUploader图片上传坑爹，图像被压缩
今天晚上在改造轮播图. 原来的代码是这种: <div> <img src="${static}/image/index/banner/`.jpg" /> & ...
【IPC第二个进程间通信】管道Pipe
IPC进程间通信+管道Pipe IPC(Inter-Process Communication,进程间通信). 管道用于进程间共享数据,事实上质是共享内存 ...
Swing 组件焦点设置
在Swing中,焦点默认是在第一个组件上,所以在项目中想将焦点设置在其他的组件上,如JTextField!但通过requestFocus()方法不起作用,有人提供以下解决方法: 全部初始化之后,jTe ...
win32使用拖放文件
于win32规划,使用拖放文件操作,非经常见(不否认有些人喜欢用button打开) 中使用拖拽,非常easy,仅仅须要在创建窗体的时候使用WS_EX_ACCEPTFILES标识符,然后使用一个消息函数 ...
C# 字符串知识整理
新知识点,只是对于本人来说而已. 系统处理文本的方式 [新知识点].NET Framework .NET Framework的定义:其包含了一个公共语言运行时(Common Language Runt ...
Android开发自学笔记(基于Android Studio1.3.1)—1.环境搭建(转)
一.引言本套学习笔记的开发环境是Windows 10 专业版和Android Studio 的最新版1.3.1. Android Studio 是一个Android开发环境,基于Intelli ...
自己的自定义单元格(IOS)
定义自己的单位格有三种方法 - 代码 - xib - storyboard(推荐) 操作方法故事板 1.在TableView财产Prototype Cells至1.莫感觉1: 2.须要创建自己定义的单 ...
HDU1160(LIS)
主题链接:http://acm.hdu.edu.cn/showproblem.php?pid=1160 题意:求体重下降.速度添加的样例最多有多少个依据体重降序排一下,然后求速度的最长上升子序列 , ...
使用php+swoole对client数据实时更新(二) (转)
上一篇提到了swoole的基本使用,现在通过几行基本的语句来实现比较复杂的逻辑操作: 先说一下业务场景.我们目前的大多数应用都是以服务端+接口+客户端的方式去协调工作的,这样的好处在于不论是处在何种终 ...

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

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

随机推荐

热门专题