百度地图JavaScript API 学习之逆地址解析

最新推荐文章于 2025-06-29 13:11:22 发布

置顶 monkeyfly007

最新推荐文章于 2025-06-29 13:11:22 发布

阅读量8.9k

点赞数 5

CC 4.0 BY-SA版权

分类专栏：百度地图API 文章标签：百度地图JS API之逆地址解析

本文链接：https://blog.youkuaiyun.com/tel13259437538/article/details/79946158

百度地图API 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何使用百度地图API实现逆地址解析，即根据经纬度坐标获取详细的地址信息，并提供了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

获取地图数据之逆地址解析

上篇博文我们说了地址解析，即通过我们自己提供的地址信息来解析出该地址所对应的地理位置坐标（或称经纬度）。

现在我们再来看一下逆地址解析。

逆地址解析服务【官方介绍请点这里】

根据坐标点获得该地点的地址描述，是地址解析的逆向转换。

这里写图片描述

使用方法

您可以通过Geocoder.getLocation()方法获得地址描述。
当解析工作完成后，您提供的回调函数将会被触发。
如果解析成功，则回调函数的参数为GeocoderResult对象，否则为null。

`getLocation()`方法【该方法的详情见这里】

这里写图片描述

用法：

var myGeo = new BMap.Geocoder();
//注：第二个参数为回调函数，它的参数是一个GeocoderResult对象；第三个参数options为可选参数，是LocationOptions类型的
myGeo.getLocation(point,function(obj){},options);
//LocationOptions类表示Geocoder的地址解析请求的可选参数。它不可实例化。

`GeocoderResult`类【该类的参考详情见这里】

这里写图片描述

基础用法：根据经纬度获取地址

//首先，创建一个地图实例
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);      
    }      
});

进阶用法：鼠标点击地图获取地址

这里涉及到了一个新的知识点：地图事件及事件处理。【详情介绍见这里】

百度地图API中的大部分对象都含有addEventListener方法，我们可以通过该方法来监听对象事件。
- 例如，BMap.Map包含click、dblclick等事件。
在特定环境下这些事件会被触发，同时监听函数会得到相应的事件参数e。
- 比如当用户点击地图时，e参数会包含鼠标所对应的地理位置point。

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);
    });        
});

代码示例

<!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>