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

获取地图数据之地址解析

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

其实,百度地图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> --> 
	<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>

效果图展示

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/WuLex/article/details/88976726