基于百度地图api获取某一点的详细信息 逆向解析地址
2023-06-13 09:15:17 时间
基于百度地图api获取某一点的详细信息 逆向解析地址
首先上图,就是我们想要实现的效果:
本章您将能学到:使用百度地图api动态获取到地图上某一点的中文地址详细信息与对应的坐标轴信息。
开发所用到的语言:Html、Css、Javascript。 本篇将直接拷贝在Html文件里面,直接打开即可运行。
参考:
全球逆地理编码服务
https://lbsyun.baidu.com/index.php?title=webapi/guide/webservice-geocoding-abroad
先贴个代码,后面再来维护另一种方法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=GXn1gkhgbbWet55NCyKzjB7Hqfdh3gos">
</script>
<script src="https://code.bdstatic.com/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<title>单个逆地址解析</title>
<style>
body,
html {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#container {
width: 100%;
height: 100%;
overflow: hidden;
}
#result {
position: fixed;
top: 10px;
left: 10px;
padding: 0px 7px;
min-width: 350px;
height: 70px;
line-height: 35px;
background: #fff;
box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
border-radius: 7px;
z-index: 99;
}
</style>
</head>
<body>
<div id='container'></div>
<div id='result'>
点击展示详细的地址:
<div id='result_l'></div>
</div>
<script>
//实例化地图
var map = new BMapGL.Map('container');
map.centerAndZoom(new BMapGL.Point(116.331398, 39.897445), 13);
var geoc = new BMapGL.Geocoder();
map.addEventListener('click', function (e) {
//清除地图上所有的覆盖物
map.clearOverlays();
console.log(e);
var pt = e.latlng;
var marker = new BMapGL.Marker(new BMapGL.Point(pt.lng, pt.lat));
map.addOverlay(marker);
geoc.getLocation(pt, function (rs) {
var addComp = rs.addressComponents;
console.log("addComp:", addComp)
$('#result_l').text(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp
.street + ", " + addComp.streetNumber);
})
})
</script>
</body>
</html>
相关文章
- 技术演练,咱们云游台湾吧,百度地图都被搜崩溃了
- WordPress给网站右侧边栏添加百度一下协助SEO优化(以子比主题为例)[WP教程]
- 【说站】关于H5自适应站替换百度小程序资源的一个问题。
- 基于百度地图api获取某一点的详细信息 逆向解析地址 - 后续
- 百度前端一面高频vue面试题汇总_2023-02-28
- 百度升级蓝天算法加强“站点构造目录发布低质内容”识别能力
- 阿里云 196 亿、华为云 103 亿、腾讯云 87 亿、百度智能云 49 亿、其他 109 亿
- ACL 2021 | 百度NLP开源语言与视觉一体的统一模态预训练方法,登顶各类榜单
- 如何在不下载百度贴吧APP的情况下登录百度贴吧
- Linux百度云客户端: 开启智能好用体验(linux百度云客户端)
- 如何评价百度刚刚开源的Paddle平台?
- 沈向洋、李飞飞、邓力等 AI 大佬频繁露脸;百度人机大战遭质疑丨AI 科技评论周刊
- 利用百度云管理MSSQL数据库(mssql百度云)
- 百度推出MySQL 1045版本极大提升用户体验(1045 mysql百度)
- 轻松下载MySQL百度云提供您简便的MySQL下载服务(mysql下载 百度云)
- 除了成立 AR Lab 实验室,百度 VR 浏览器 iOS 版也上线了
- 百度宣布 7nm 制程 AI 芯片“昆仑芯 2” 实现量产