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

2023-11-19

摘要:无论是百度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 οnmοuseοver='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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

  • 如何从字符串中删除除字母、数字、空格、感叹号和问号之外的所有内容?

    如何删除除以下内容之外的所有内容 字符串中的字母 数字 空格 感叹号 问号 该方法支持国际语言 UTF 8 非常重要 您可以使用正则表达式 myString replace w s g 这将替换除单词字符 空格 感叹号或问题之外的所有内容
  • 添加 Javascript 按钮来更改 iframe 的内容

    我正在尝试创建此页面 其中有一个 Iframe 并且我想添加一个按钮来显示 iframe 中的下一页 以及一个按钮来显示 iframe 中的上一页 我总共有 4 个页面要在名为 1 html 2 html 3 html 4 html 的 i
  • Javascript 闭包与 PHP 闭包,有什么区别?

    JS 中的闭包和 PHP 中的闭包有什么区别 它们的工作方式几乎相同吗 在 PHP 中编写闭包时有什么需要注意的注意事项吗 一个区别是两者如何处理存储执行匿名函数的上下文 JavaScript var a 1 var f function
  • 如何以 JavaScript 编程方式获取旋转的 svg 文本边界

    我正在动态渲染 SVG 图像并创建旋转文本 如果旋转的文本与其他文本重叠 我需要删除该文本 但我无法测量旋转的文本来创建边界并检查下一个标签文本区域 我创建了 3 个 SVG 元素来解释 SVG 1 显示重叠的文本 SVG 2 显示重叠的旋
  • React useEffect hook 和 Async/await 自己的获取数据函数?

    我尝试创建一个从服务器获取数据的函数 并且它有效 但我不确定这是否正确 我创建了一个函数组件来获取数据 使用useState 使用效果 and 异步 等待 import React useState useEffect from react
  • CSS - 制作“步进”文本的好方法?

    有没有一种好的方法可以实现以下目标 而无需任何额外的标记 不过使用 JavaScript 就很好了 任何想法 Thanks Edit 我的标记将是这样的 div style width 400px p Text text text Text
  • 从 json 文件加入时添加角色 (autorole)

    我对 JS 相当陌生 为了学习 我决定为 Discord 制作一个机器人 我学到了很多并且正在继续学习 我有一个 autorole 的想法 我知道传统的做法 bot on guildMemberAdd member gt var role
  • JavaScript 中的凯撒密码

    我正在尝试编写一个程序来解决javascript中的以下问题 写在本段下面 我不知道为什么我的代码不起作用 有人可以帮助我吗 我是 JavaScript 新手 这是一个免费的代码训练营问题 现代常见的用法是 ROT13 密码 其中字母的值移
  • Javascript 3d 绘图实用程序? [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 有谁知道有什么好的 javascript 3d 绘图实用程序吗 我知道每个网站都推荐过画布 3d 图
  • 根据复选框显示/隐藏输入字段[重复]

    这个问题在这里已经有答案了 如果单击该复选框 它将显示一个输入字段 到目前为止它正在工作 但如果未选中该复选框 它应该隐藏它 我该怎么做 div class checkbox div
  • 如何使用jsPDF设置图像以适合页面宽度?

    有什么办法可以解决这个问题吗 我尝试以毫米为单位设置宽度和高度 如何将其设置为全角 您可以获取 PDF 文档的宽度和高度 如下所示 var doc new jsPDF p mm a4 var width doc internal pageS
  • 如何从 WinRT StreamSocket 读取所有可用数据并清空 inputStream?

    我想在向套接字写入新数据之前读取当前正在等待套接字的所有数据 WinRT中的读取方法都是异步的 所以我不能简单地while直到套接字为空 由于我确实想丢弃套接字上的数据 因此我不想使用读取器 而是直接从套接字读取数据IInputStream
  • 使用XMLHttpRequest自动网页刷新内存泄漏

    问候 我一直在为一些使用 8 位微控制器的硬件开发网络界面 该网页使用 HTML javascript JSON 和 XHR XMLHttpRequest 进行通信 我想做的是创建一个页面 使用 setInterval 使用控制器中的新值每
  • AngularJS 中的嵌套模块

    我有 2 个不同的 AngularJs 模块 一个 widgetContainer 和一个 widget 小部件可以显示为独立的应用程序 也可以包含在小部件容器中 一个 widgetContainer 包含 0 N 个 widget 如果我
  • NodeJS 错误堆栈未定义 [关闭]

    Closed 这个问题需要细节或清晰度 help closed questions 目前不接受答案 我正在使用节点检查器 我注意到new Error 有未定义的堆栈 如果我将此值分配给一个变量 该变量将显示堆栈未定义 有趣的是 跑步new
  • 用空字符串替换状态:Javascript

    我有这个网址 website com con blog true 我在 javascript 中所做的是 if getURLparams blog RandomFunction change the url window history r
  • KML 中的 JavaScript 被 Google 地球插件忽略

    我创建了一个简单的 KML 文件 该文件可以在独立的 Google 地球客户端中运行 但在 Google 地球插件中根本无法运行 无论浏览器如何
  • jQuery 倒计时插件 - 只显示非零周期

    我正在使用 jQuery 倒计时插件编写倒计时 我只希望它显示活动 非零 周期 例如代替 剩余时间 0 天 0 小时 13 分 20 秒 它应该只显示 13 分 20 秒 我的代码是 countdown countdown expiryUr
  • 仅使用 javascript 获取网站的正文元素

    我想检索以下网站的正文内容http sports espn go com nhl bottomline scores nhl s left1 http sports espn go com nhl bottomline scores nhl
  • ReactJS setState 仅在嵌套在 setState 中时才有效

    问题 当我使用 this setState 并在回调中输出状态时 它根本不会改变 但是当我将 setstate 嵌套在 setstate 中时 它将正常工作 例子 这不行 this setState data newData 这确实有效 t

随机推荐

  • AWVS使用教程

    AWVS可以用来 Site Crawler 爬取URL Target Finder IP端口扫描 Subdomain Scanner 用DNS进行域名解析 找域名下的子域及其主机名 Blind SQL Injector 在相应参数位置按 添
  • sql的几种约束,非空,不重

    NOT NULL 用于控制字段的内容一定不能为空 NULL UNIQUE 控件字段内容不能重复 一个表允许有多个 Unique 约束 PRIMARY KEY 也是用于控件字段内容不能重复 但它在一个表只允许出现一个 FOREIGN KEY
  • 位移运算使用技巧

    位移运算使用技巧 左位移 lt lt 右位移 gt gt 左位移 lt lt 将二进制数向左位移操作 高位溢出则丢弃 地位补0 int a 11 int b a lt lt 1 b 22 位移前 0000 1011 位移后 0001 011
  • 达芬奇传

    列奥纳多 迪 皮耶罗 达 芬奇 出生于1452年 1519年逝世 享年67岁 画家 发明家 科学家 生物学家 工程师 达 芬奇的意思是 来自芬奇镇 他的名字叫做列奥纳多 达 芬奇的父亲叫瑟 皮耶罗 达 芬奇 是佛罗伦萨的法律公证员 因此十分
  • git:批处理启动Git-Bash窗口并显示特定目录

    参考 使用批处理脚本 在特定目录中启动Git Bash窗口
  • 【数据结构】复杂度

    博客主页 小王又困了 系列专栏 数据结构 人之为学 不日近则日退 感谢大家点赞 收藏 评论 目录 一 什么是数据结构 二 什么是算法 三 算法的效率 四 时间复杂度 4 1大O渐进表示法 4 2常见时间复杂度计算举例 4 3例题 消失的数字
  • StarkNet 批量交互 mint 铸造 js 脚本

    代码使用 starknet 模块与 StarkNet 网络进行交互 通过读取私钥文件和执行铸造操作来创建 NFT 非同质化代币 它通过批量运行的方式处理多个私钥和地址对 并将结果输出到控制台和日志文件中 代码的详细步骤 导入模块和变量 co
  • QT5串口编程----线程循环发送不成功问题

    今天想写一个QT5的串口编程 能够循环发送数据 想具体到us级别 不需要设置ms发送 所以想用一个线程一直发送 关键问题是碰到在线程循环发送竟然发不出去 见鬼了 最后找到问题是要在每次发送后要判断waitForBytesWritten是否发
  • jmeter接口测试,CSV数据文件引用,参数化

    1 新增一个Excel文件 填写会用到的变量数据 2 将文件保存为CSV格式文件 3 在jmeter里添加 CSV数据文件配置 导入登录的用户和密码数据等信息 在jmeter里引用Excel转化的CSV格式数据文件 说明 带入的数据依次是
  • RTKLIB源码解析(一)、单点定位(pntpos.c)

    目录 pntpos satposs estpos raim fde estvel ephclk satpos satsys seleph eph2clk ephpos eph2pos rescode lsq valsol matmul do
  • 计算机视觉入门之构建一个扫描仪

    源代码 import the necessary packages from transform import four point transform from skimage filters import threshold local
  • tengine [emerg] invalid IPv6 address in resolver “[fe80::1%enp2s0]“ in .../nginx.conf:137

    错误 nginx emerg invalid IPv6 address in resolver fe80 1 enp2s0 in usr local nginx conf nginx conf 137 解决 1 vim etc resolv
  • kafka(三)重平衡

    历史文章 kafka 一 kafka的基础与常用配置 文章目录 一 kafka消费者组 二 重平衡 Rebalance 2 1 重平衡触发条件 2 2 重平衡策略 2 2 1 Range 平均分配 2 2 2 RoundRobin 轮询分配
  • 独家

    作者 Damir Yalalov 翻译 陈超 校对 赵茹萱 本文约1100字 建议阅读5分钟 本文介绍了ChatGPT如何解决简单的机器学习任务并给出了鸢尾花分类和城市预测两个案例 一句话概括 ChatGPT可以帮助你完成简单的机器学习任务
  • ldconfig: /usr/lib/wsl/lib/libcuda.so.1 is not a symbolic link

    libcuda so
  • 【宠粉福利】这次我们准备了 iPhone 12、AirPods Pro、罗技鼠标等大礼等你来领!...

    喜迎开学季 C 站开豪礼 最高可开 iphone 12 盲盒开出的不只是一份礼物 更是对于一切美好的期待 拆开一个盲盒 就像开始一场未知的爱丽丝梦游仙境 为 两点一线 朝九晚九 的生活 埋下一刻期待的种子 去收获一份未知的惊喜 这次 价格再
  • CentOS 7 关闭网络限制

    1 安装CentOS 7 3操作系统mini版本即可 2 设置关闭Selinux 编辑 etc selinux config vi etc selinux config SELINUX disabled 重启机器 查看selinux状态 s
  • C++中的namespace

    namespace中文意思是命名空间或者叫名字空间 传统的C 只有一个全局的namespace 但是由于现在的程序的规模越来越大 程序的分工越来越细 全局作用域变得越来越拥挤 每个人都可能使用相同的名字来实现不同的库 于是程序员在合并程序的
  • 手撕计算机网络——应用层(四):P2P

    前言 进入应用层学习也有了一段时间了 接下来的这篇文章中小荔枝会将应用层P2P结构体系于我们客户 端系统体系在分发文件中的机理进行整理 希望今天能结束应用层学习哈哈哈 运输层我来啦 目录 前言 一 P2P的自拓展性 二 BitTorrent
  • 【高德地图API】从零开始学高德JS API(八)——地址解析与逆地址解析

    摘要 无论是百度LBS开放平台 还是高德LBS开放平台 其调用量最高的接口 必然是定位 其次就是地址解析了 又称为地理编码 地址解析 就是将地址转换为经纬度 而逆地址解析 就是将经纬度转换为地址 经纬度一般是由专业测绘机构用GPS采集 然后