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

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 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>

 


目录
打赏
0
0
0
0
216
分享
相关文章
Apipost vs Apifox:高效API协作的差异化功能解析
作为企业级API架构师,深度体验APIPost与Apifox后发现几大亮点功能。目录级参数配置避免全局污染;WebSocket消息分组提升长连接管理效率;Socket.IO支持解决特定协议需求;接口锁定保障团队协作安全。大型团队适合APIPost的细粒度管控,复杂物联网项目需WebSocket分组,维护遗留系统离不开Socket.IO支持,初创团队可按需灵活选择。这些特性显著优化开发协作质量。
离线VS强制登录?Apipost与Apifox的API工具理念差异深度解析
在代码开发中,工具是助手还是枷锁?本文通过对比Apipost和Apifox在断网环境下的表现,探讨API工具的选择对开发自由度的影响。Apifox强制登录限制了离线使用,而Apipost支持游客模式与本地存储,尊重开发者数据主权。文章从登录策略、离线能力、协作模式等方面深入分析,揭示工具背后的设计理念与行业趋势,帮助开发者明智选择,掌握数据控制权并提升工作效率。
调用DeepSeek API增强版纯前端实现方案,支持文件上传和内容解析功能
本方案基于DeepSeek API增强版,提供纯前端实现的文件上传与内容解析功能。通过HTML和JavaScript,用户可选择文件并调用API完成上传及解析操作。方案支持多种文件格式(如PDF、TXT、DOCX),具备简化架构、提高响应速度和增强安全性等优势。示例代码展示了文件上传、内容解析及结果展示的完整流程,适合快速构建高效Web应用。开发者可根据需求扩展功能,满足多样化场景要求。
金融数据分析:解析JavaScript渲染的隐藏表格
本文详解了如何使用Python与Selenium结合代理IP技术,从金融网站(如东方财富网)抓取由JavaScript渲染的隐藏表格数据。内容涵盖环境搭建、代理配置、模拟用户行为、数据解析与分析等关键步骤。通过设置Cookie和User-Agent,突破反爬机制;借助Selenium等待页面渲染,精准定位动态数据。同时,提供了常见错误解决方案及延伸练习,帮助读者掌握金融数据采集的核心技能,为投资决策提供支持。注意规避动态加载、代理验证及元素定位等潜在陷阱,确保数据抓取高效稳定。
69 17
前后端分离开发:如何高效调试API?有工具 vs 无工具全解析
在前后端分离开发中,API调试至关重要。本文探讨有无调试工具时如何高效调试API,重点分析Postman、Swagger等工具优势及无工具代码调试方法。通过实际场景如用户登录接口,对比两者特性。同时介绍Apipost-Hepler(IDEA插件),将可视化与代码调试结合,提供全局请求头配置、历史记录保存等功能,优化团队协作与开发效率,助力API调试进入全新阶段。
JS数组操作方法全景图,全网最全构建完整知识网络!js数组操作方法全集(实现筛选转换、随机排序洗牌算法、复杂数据处理统计等情景详解,附大量源码和易错点解析)
这些方法提供了对数组的全面操作,包括搜索、遍历、转换和聚合等。通过分为原地操作方法、非原地操作方法和其他方法便于您理解和记忆,并熟悉他们各自的使用方法与使用范围。详细的案例与进阶使用,方便您理解数组操作的底层原理。链式调用的几个案例,让您玩转数组操作。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
全网最全情景,深入浅出解析JavaScript数组去重:数值与引用类型的全面攻略
如果是基础类型数组,优先选择 Set。 对于引用类型数组,根据需求选择 Map 或 JSON.stringify()。 其余情况根据实际需求进行混合调用,就能更好的实现数组去重。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
【实战解析】smallredbook.item_get_video API:小红书视频数据获取与电商应用指南
本文介绍小红书官方API——`smallredbook.item_get_video`的功能与使用方法。该接口可获取笔记视频详情,包括无水印直链、封面图、时长、文本描述、标签及互动数据等,并支持电商场景分析。调用需提供`key`、`secret`和`num_iid`参数,返回字段涵盖视频链接、标题、标签及用户信息等。同时,文章提供了电商实战技巧,如竞品监控与个性化推荐,并列出合规注意事项及替代方案对比。最后解答了常见问题,如笔记ID获取与视频链接时效性等。
最细最有条理解析:事件循环(消息循环)是什么?为什么JS需要异步
度一教育的袁进老师谈到他的理解:单线程是异步产生的原因,事件循环是异步的实现方式。 本质是因为渲染进程因为计算机图形学的限制,只能是单线程。所以需要“异步”这个技术思想来解决页面阻塞的问题,而“事件循环”是实现“异步”这个技术思想的最主要的技术手段。 但事件循环并不是全部的技术手段,比如Promise,虽然受事件循环管理,但是如果没有事件循环,单一Promise依然能实现异步不是吗? 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您
如何高效爬取天猫商品数据?官方API与非官方接口全解析
本文介绍两种天猫商品数据爬取方案:官方API和非官方接口。官方API合法合规,适合企业长期使用,需申请企业资质;非官方接口适合快速验证需求,但需应对反爬机制。详细内容涵盖开发步骤、Python实现示例、反爬策略、数据解析与存储、注意事项及扩展应用场景。推荐工具链包括Playwright、aiohttp、lxml等。如需进一步帮助,请联系作者。

推荐镜像

更多