<!DOCTYPE html>
<html lang="en">
<head>
<!--1、记得替换ak;2、我的是直接打开一个单独的html网页不成,还要布设在服务器上才可以,很奇怪-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=你的ak"></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: 100px;
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_city'></div>
<div id='result_2'></div>
<div id='result_l'></div>
</div>
<script>
//实例化地图
var map = new BMapGL.Map('container');
map.setTrafficOn();
map.enableScrollWheelZoom(true);
map.centerAndZoom('广州市', 10);
var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl(); // 添加比例尺控件
map.addControl(zoomCtrl);
var geoc = new BMapGL.Geocoder();
map.addEventListener("zoomend", function(e){
var ZoomNum = map.getZoom();
$('#result_2').text(parseInt(ZoomNum));
});
map.addEventListener('click', function(e){
//清除地图上所有的覆盖物
map.clearOverlays();
var pt = e.latlng;
var marker = new BMapGL.Marker(new BMapGL.Point(pt.lng, pt.lat));
map.addOverlay(marker);
geoc.getLocation(pt, function(rs){
$('#result_city').text(rs.addressComponents.city);
$('#result_l').text(rs.point.lat+","+rs.point.lng);
})
})
</script>
</body>
</html>