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

本文涉及的产品
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 原文:【高德地图API】从零开始学高德JS API(八)——地址解析与逆地址解析 摘要:无论是百度LBS开放平台,还是高德LBS开放平台,其调用量最高的接口,必然是定位,其次就是地址解析了,又称为地理编码。

原文:【高德地图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 +="";    for(var i=0;i<data.regeocode.roads.length;i++){        var color = (i %2===0?'#fff' : '#eee');        roadinfo +="";    }    roadinfo +=" 
                   
道路:" + data.regeocode.roads[i].name + " 方向:" + data.regeocode.roads[i].direction + " 距离:" + data.regeocode.roads[i].distance + "
"    //返回周边兴趣点信息    poiinfo += "";    for(var j=0;j<data.regeocode.pois.length;j++){        var color = j %2===0?'#fff' : '#eee';        poiinfo +="";    }    poiinfo +="
兴趣点:" + data.regeocode.pois[j].name + " 类型:" + data.regeocode.pois[j].type + " 距离:" + data.regeocode.pois[j].distance + "
";    //返回结果拼接输出    resultStr = "

"+"地址"+ address + "


周边道路信息
" + roadinfo + "
周边兴趣点信息
" + poiinfo +"

";    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 += ""+"地址"+geocode[i].formattedAddress+""+ "    坐标" + geocode[i].location.getLng() +", "+ geocode[i].location.getLat() +""+ "    匹配级别" + geocode[i].level +"";          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>

 


目录
相关文章
|
17天前
|
JSON 缓存 JavaScript
深入浅出:使用Node.js构建RESTful API
在这个数字时代,API已成为软件开发的基石之一。本文旨在引导初学者通过Node.js和Express框架快速搭建一个功能完备的RESTful API。我们将从零开始,逐步深入,不仅涉及代码编写,还包括设计原则、最佳实践及调试技巧。无论你是初探后端开发,还是希望扩展你的技术栈,这篇文章都将是你的理想指南。
|
10天前
|
JSON JavaScript 前端开发
深入浅出Node.js:从零开始构建RESTful API
在数字化时代的浪潮中,后端开发作为连接用户与数据的桥梁,扮演着至关重要的角色。本文将引导您步入Node.js的奇妙世界,通过实践操作,掌握如何使用这一强大的JavaScript运行时环境构建高效、可扩展的RESTful API。我们将一同探索Express框架的使用,学习如何设计API端点,处理数据请求,并实现身份验证机制,最终部署我们的成果到云服务器上。无论您是初学者还是有一定基础的开发者,这篇文章都将为您打开一扇通往后端开发深层知识的大门。
27 12
|
8天前
|
机器学习/深度学习 搜索推荐 API
淘宝/天猫按图搜索(拍立淘)API的深度解析与应用实践
在数字化时代,电商行业迅速发展,个性化、便捷性和高效性成为消费者新需求。淘宝/天猫推出的拍立淘API,利用图像识别技术,提供精准的购物搜索体验。本文深入探讨其原理、优势、应用场景及实现方法,助力电商技术和用户体验提升。
|
10天前
|
监控 数据管理 测试技术
API接口自动化测试深度解析与最佳实践指南
本文详细介绍了API接口自动化测试的重要性、核心概念及实施步骤,强调了从明确测试目标、选择合适工具、编写高质量测试用例到构建稳定测试环境、执行自动化测试、分析测试结果、回归测试及集成CI/CD流程的全过程,旨在为开发者提供一套全面的技术指南,确保API的高质量与稳定性。
|
17天前
|
JavaScript NoSQL API
深入浅出Node.js:从零开始构建RESTful API
在数字化时代的浪潮中,后端开发如同一座灯塔,指引着数据的海洋。本文将带你航行在Node.js的海域,探索如何从一张白纸到完成一个功能完备的RESTful API。我们将一起学习如何搭建开发环境、设计API结构、处理数据请求与响应,以及实现数据库交互。准备好了吗?启航吧!
|
18天前
|
JavaScript 前端开发 API
Vue.js 3:探索组合式API带来的新变革
Vue.js 3:探索组合式API带来的新变革
|
18天前
|
JavaScript 前端开发 API
Vue.js 3中的Composition API:提升你的组件开发体验
Vue.js 3中的Composition API:提升你的组件开发体验
|
20天前
|
JSON API 数据格式
二维码操作[二维码解析基础版]免费API接口教程
此接口用于解析标准二维码内容,支持通过BASE64编码或远程图片路径提交图片。请求需包含用户ID、用户KEY、图片方式及图片地址等参数,支持POST和GET方式。返回结果包括状态码和消息内容,适用于图片元素简单的二维码解析。
|
1天前
|
供应链 搜索推荐 数据挖掘
1688搜索词推荐API接口:开发应用与收益全解析
在电商数据驱动时代,1688搜索词推荐API接口为开发者、供应商及电商从业者提供强大工具,优化业务流程,提升竞争力。该接口基于1688平台的海量数据,提供精准搜索词推荐,助力电商平台优化搜索体验,提高供应商商品曝光度与销售转化率,同时为企业提供市场分析与商业洞察,促进精准决策与成本降低。通过集成此API,各方可实现流量增长、销售额提升及运营优化,推动电商行业的创新发展。
5 0
|
7天前
|
监控 搜索推荐 测试技术
电商API的测试与用途:深度解析与实践
在电子商务蓬勃发展的今天,电商API成为连接电商平台、商家、消费者和第三方开发者的重要桥梁。本文深入探讨了电商API的核心功能,包括订单管理、商品管理、用户管理、支付管理和物流管理,并介绍了有效的测试技巧,如理解API文档、设计测试用例、搭建测试环境、自动化测试、压力测试、安全性测试等。文章还详细阐述了电商API的多样化用途,如商品信息获取、订单管理自动化、用户数据管理、库存同步、物流跟踪、支付处理、促销活动管理、评价管理、数据报告和分析、扩展平台功能及跨境电商等,旨在为开发者和电商平台提供有益的参考。
14 0

推荐镜像

更多