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

最新推荐文章于 2025-04-27 16:01:36 发布

置顶 monkeyfly007

最新推荐文章于 2025-04-27 16:01:36 发布

阅读量7.1k

点赞数 3

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

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

版权

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

10 篇文章

订阅专栏

获取地图数据之地址解析

首先我们需要知道如何进行地址解析以及有哪些地址解析的方式。

其实，百度地图API给我们提供了2种解析方式：地址解析和逆地址解析。

下面我们来认识一下它们。【官方的介绍地址请点这里查看】

简介

地址解析服务提供从地址转换到经纬度的服务。
逆地址解析则提供从经纬度坐标转换到地址的转换功能。

具体如下图所示：

这里写图片描述

单词解释

一说到地址解析，就涉及到了两个重要的概念，那就是地理坐标中的——经度和纬度。

我们先来认识一下这两个单词，因为代码中要用到，而且这两个单词也挺好记忆的：

经度 longitude 英 [ˈlɒŋgɪtju:d]
纬度 latitude 英 [ˈlætɪtju:d]

其次，我们还需要知道地理定位的这个单词：

地理定位 geolocation 英 [dʒɪɒləʊ'keɪʃn]

疑问：为什么呢？

原因：地理定位（Geolocation）是HTML5 的重要特性之一，提供了确定用户位置的功能。

HTML5 地理定位【详情请看这里】

所以，关于地理定位我们必须要知道：

HTML5 Geolocation API用于获得用户的地理位置。
该API中使用 getCurrentPosition() 方法来获得用户的位置。

百度API提供的地址解析类【详情见类参考】

Geocoder：地址解析 / 逆地址解析，用于坐标与地址间的相互转换。

核心类Geocoder的类参考如图所示：

这里写图片描述

由上图可知：

Geocoder类有一个名为Geocoder()的构造函数，使用时将它实例化就行了。即new一个新的对象，就相当于创建了一个地址解析器的实例。代码：var myGeo = new BMap.Geocoder();
然后该构造函数存在两个方法，根据方法名很容易能猜出方法的功能：
- getPoint() 得到地理坐标点，即经纬度信息。【根据手动提供的地址信息获取】
- getLocation() 得到当前用户的具体地址信息。【根据用户当前的地理位置自动获取】
- 使用方法：
  - myGeo.getPoint(要解析的地址信息,function(回调函数的参数){},城市名);
  - myGeo.Locaiton(当前位置的地理坐标点,function(回调函数的参数){},options); 注：options为可选参数，一般来说不用写。

地址解析服务【先学习第一种】

地址解析服务，即根据地址描述获得坐标信息。

下面我们来看看如何进行地址解析。百度地图API都提供了哪些方法给我们调用呢？

（1）百度地图API提供了Geocoder类进行地址解析；
（2）可以通过Geocoder.getPoint()方法来将一段地址描述转换为一个坐标。

分析：
（1）百度地图已经为我们提供了地址解析的类，名为Geocoder。
（2）使用的时候，只需要通过它的构造函数Geocoder()进行实例化，即new一个对象，然后去调用它的getPoint()方法就实现了地址解析的功能了。

疑问：解析成功后的结果在哪里返回呢？
答案：GeocoderResult类表示Geocoder的地址解析结果。它在地址解析的回调函数的参数中返回，而且不可实例化。

即Geocoder.getPoint()方法中的第二个参数callback，在回调函数callback的参数中，GeocoderResult作为结果返回。
换句话说就是，地址解析成功后，地址解析的结果，即GeocoderResult类，它会作为回调函数的参数进行返回。而且返回的这个参数值是GeocoderResult类的属性point，即坐标点。这个参数point是百度地图API规定好的。
所以，回调函数的参数最终返回的是一个Point类型的坐标点。

//回调函数
function(point){
    //里面写地址解析成功想做的事..
    console.log(point);
}

这里写图片描述

具体如何使用呢？（看代码）

如下示例，我们将地址“北京市海淀区上地10街10号”进行转换来获取该位置的地理经纬度坐标，并在这个位置上添加一个标注。

注意：在调用Geocoder.getPoint()方法时，需要提供地址解析所在的城市（本例为“北京市”）。

var map = new BMap.Map("allmap");      
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
/*至此，百度地址初始化完成*/

// 创建地址解析器实例     
var myGeo = new BMap.Geocoder();      
// 将地址解析结果显示在地图上，并调整地图视野    
myGeo.getPoint("北京市海淀区上地10街10号", function(point){//回调函数      
    if (point) {      
        map.centerAndZoom(point, 16);      
        map.addOverlay(new BMap.Marker(point));      
    }      
 }, 
"北京市");

代码示例

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=3ecea51f560650b1ed8a4b99808f52e8"></script>
    <title>地址解析</title>
</head>
<body>
    <div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");//创建一个map实例，allmap表示地图容器
    var point = new BMap.Point(116.331398,39.897445);//创建点坐标
    map.centerAndZoom(point,12);//初始化地图，设置地图的中心点坐标和缩放级别

    // 创建地址解析器实例
    /* Geocoder类用于获取用户的地址解析。
    * 构造函数：Geocoder() 创建一个地址解析器的实例
    *方法：getPoint(address: String, callback: Function, city: String) 对指定的地址进行解析。
    *如果地址定位成功，则以地址所在的坐标点Point为参数调用回调函数。否则，回调函数的参数为null。
    *city为地址所在的城市名，例如“北京市”。
    */
    var myGeo = new BMap.Geocoder();
    // 将地址解析结果显示在地图上,并调整地图视野
    myGeo.getPoint("北京市海淀区上地10街", function(point){
        if (point) {
            map.centerAndZoom(point, 16);

            //以下代码向地图中心点point添加了一个标注，并将该标注添加到地图中
            // map.addOverlay(new BMap.Marker(point));

            //Marker：标注表示地图上的点，可自定义标注的图标。
            var mark = new BMap.Maker(point);
            //Overlay：覆盖物的抽象基类，所有的覆盖物均继承此类的方法。
            map.addOverlay(mark);
        }else{
            alert("您选择地址没有解析到结果!");
        }
    }, "北京市");//注：该方法存在3个参数，最后一个参数“城市名”别忘了！
</script>

效果图展示

这里写图片描述