基于百度地图api获取某一点的详细信息 逆向解析地址
基于百度地图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>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-05-09，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录