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

àì夳堔傛蜴生んèń 2021-06-26 16:06 1034阅读 0赞

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

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

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

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

## 简介 ##

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

具体如下图所示：  
![在这里插入图片描述][20190402212950154.png]

## 单词解释 ##

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

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

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

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

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

**疑问：为什么呢？**

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

## HTML5 地理定位[【详情请看这里】][Link 1] ##

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

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

## 百度API提供的地址解析类[【详情见类参考】][Link 2] ##

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

核心类`Geocoder`的类参考如图所示：  
![在这里插入图片描述][20190402213556525.png]由上图可知：

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

![在这里插入图片描述][20190402214233888.png]  
具体如何使用呢？（看代码）

如下示例，我们将地址“`北京市海淀区上地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/getscript?v=2.0&ak=3ecea51f560650b1ed8a4b99808f52e8&services=&t=20190123111209"></script>
    	
        <title>地址解析</title>
    </head>
    <body>
        <div id="allmap"></div>
    </body>
    </html>
    <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap");//创建一个map实例，allmap表示地图容器 map.disableDragging();//禁止拖拽 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：标注表示地图上的点，可自定义标注的图标。 //marker的动画效果：自定义图片（动画效果还可以将png格式的图片换成gif的图片） var markerImg= new BMap.Icon("timg.gif", new BMap.Size(50, 50)); //size 分别对应marker的 宽 和 高， 图片应该设置成marker的大小 //marker = new BMap.Marker(point, { icon: markerImg}); // 创建标注 //marker.setAnimation(BMAP_ANIMATION_BOUNCE); //弹跳效果（一直跳动） //marker.setAnimation(BMAP_ANIMATION_DROP); //坠落效果（从顶部落下） var mark = new BMap.Marker(point); mark.setAnimation(BMAP_ANIMATION_BOUNCE); //Overlay：覆盖物的抽象基类，所有的覆盖物均继承此类的方法。 map.addOverlay(mark); }else{ alert("您选择地址没有解析到结果!"); } }, "北京市");//注：该方法存在3个参数，最后一个参数“城市名”别忘了！ </script>

## 效果图展示 ##

![在这里插入图片描述][20190402221409188.png]

[20190402212950154.png]: /images/20210626/911b00cf86c748c78837515de4d7eca0.png
[Link 1]: http://www.w3school.com.cn/html5/html_5_geolocation.asp
[Link 2]: http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a7b27
[20190402213556525.png]: https://img-blog.csdnimg.cn/20190402213556525.png
[20190402214233888.png]: https://img-blog.csdnimg.cn/20190402214233888.png
[20190402221409188.png]: https://img-blog.csdnimg.cn/20190402221409188.png