Reverse geocoding for obtaining map data
In the last blog post we talked about geocoding, ie 通过我们自己提供的地址信息来解析出该地址所对应的地理位置坐标（或称经纬度）.
Now let's look at reverse geocoding again.
Reverse Address Resolution Service [For official introduction, please click here]
Obtaining the address description of the place according to the coordinate point is the reverse transformation of geocoding.
Instructions
- You can
Geocoder.getLocation()get the address description via method. - The callback function you provide will be fired when parsing is complete.
- If the parsing is successful, the parameter of
GeocoderResultthe callback function is an object , otherwise it isnull.
getLocation()Method [Details of this method can be found here]
usage:
var myGeo = new BMap.Geocoder();
//注：第二个参数为回调函数，它的参数是一个GeocoderResult对象；第三个参数options为可选参数，是LocationOptions类型的
myGeo.getLocation(point,function(obj){},options);
//LocationOptions类表示Geocoder的地址解析请求的可选参数。它不可实例化。GeocoderResultClass [For reference details of this class, see here]
Basic usage: get address based on latitude and longitude
//首先，创建一个地图实例
var map = new BMap.Map("allmap");
//然后进行地图初始化（用一个Point坐标点和缩放级别来初始化地图。）
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
/*至此，地图初始化完成*/
// 创建地理编码（地理解析器）实例
var myGeo = new BMap.Geocoder();
// 根据坐标得到地址描述
myGeo.getLocation(new BMap.Point(116.364, 39.993), function(result){
if (result){
alert(result.address);
}
});Advanced usage: Click on the map to get the address
A new knowledge point is involved here: 地图事件及事件处理. 【For details, see here】
- Most objects in Baidu Maps
APIcontainaddEventListenermethods, through which we can monitor object events.
- For example,
BMap.Mapcontainsclick、dblclicketc. events.
- For example,
- Under certain circumstances, these events will be triggered, and the listener function will get the corresponding event parameters
e.
- For example, when the user clicks on the map, the
eparameter will contain the geographic location corresponding to the mousepoint.
- For example, when the user clicks on the map, the
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,12);
/*至此，地图初始化完成*/
var geoc = new BMap.Geocoder();
//为地图实例添加了鼠标单击的监听行为
map.addEventListener("click", function(e){
var pt = e.point;
//第一个参数为要逆解析的坐标点；第二个参数为回调函数
geoc.getLocation(pt, function(rs){//回调函数中的参数rs是一个GeocoderResult对象
//GeocoderResult对象的addressComponents属性返回了一个结构化的地址描述
var addComp = rs.addressComponents;
alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
});
});code example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=no">
<title>点击地图展示详细地址</title>
<style>
html,body{
width: 100%;
height: 100%;
font-family: "Microsoft Yahei";
overflow: hidden;
margin: 0;
}
#allmap{
width: 800px;
height: 500px;
margin: 0 auto;
}
</style>
<script src="http://api.map.baidu.com/api?v=2.0&ak=3ecea51f560650b1ed8a4b99808f52e8"></script>
</head>
<body>
<div id="allmap"></div>
<script>
//百度地图API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,12);
//地图初始化完成
//地图的配置：启用鼠标滚轮放大缩小功能（默认不开启）
map.enableScrollWheelZoom(true);
//创建一个地址解析器的实例
var geoc = new BMap.Geocoder();
//为地图实例添加了一个鼠标单击的监听事件
map.addEventListener("click",function(e){
//事件参数e中保存了鼠标单击时所对应的地理位置point
var pt = e.point;
//将鼠标单击时的坐标进行逆地址解析
geoc.getLocation(pt,function(rs){//解析的结果是一个对象，且作为参数传入了回调函数中
//该对象的属性中保存了解析后的结构化的地址信息
var addrComp = rs.addressComponents;
console.log(addrComp);
//{streetNumber: "", street: "西长安街", district: "东城区", city: "北京市", province: "北京市"}
alert(addrComp.province + "," + addrComp.city + "," + addrComp.district + "," + addrComp.street + "," + addrComp.streetNumber)
})
});
</script>
</body>
</html>