百度地图调用笔记：javascript版本

<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://api.map.baidu.com/api?v=2.0&ak=密钥"></script>
2.提供一个容器，这个容器一般利用div提供，然后需要注意的是这个div里面最好不要放东西，然后提供一个id。
<div id="map"></div>
注意，需要设置高度
3.在底部调用javascript代码，规律可循：
1.需要申明容器对象，利用百度地图提供的BMap类的Map方法，
var mp=new BMap.Map("传入你刚才提供的容器的id");
2.设置中点位置，也就是说地图展示的时候那个地区为中心，比如如果你传入的是北京，或者经纬度，那么就以那个经纬度为周期。
mp.centerAndZoom (arg1,arg2);
其中两个参数分别为：
arg1:表示位置，可以是一个点，利用百度提供的BMap.Point(地理经度，地理纬度);进行定位，或者直接使用地址进行定位。
arg2:表示定位的等级，范围为3-19级，不过注意，这个级别只适用于第一个参数是一个点的时候，并且这个时候这个参数必须要存在的。如果第一个参数是字符串，也就是比如传入的是北京，那么这个时候这个参数就可以忽略不计，因为这个时候地图会根据传入的参数自适应的缩放，如果是高清底图，就是移动端（Android或者IOS）的时候，等级范围为3-18级。
然后初始化地图。操作了以上步骤基本上就可以把地图显示出来了，但这仅仅只是个基础。接下来我们可以做一些操作。

1.首先我们可以为地图添加一些控件，比如定位的控件，比如缩放的控件，又比如地图切换，就是切换成3d还是平面或者卫星图的控件。我们可以用下面的方法进行切换：
mp.addControl(control:Control);
注意，这里没有返回值。而且一个控件实例只能向地图添加一次。
下面我会介绍有什么控件和用法：

一.控件类：
1.Control:此类就是所有控件的父母，也就是所有控件的基类，既然是基类，肯定会提供一些比较常用而且比较有用的属性：
defaultAnchor:默认停靠位置，自定义控件的时候需要设置
defaultOffset:默认偏移位置，自定义控件的时候需要设置
方法：
setAnchor(anchor:enum ControlAnchor):设置控件停靠位置
getAnchor():返回控件停靠位置（enum ControlAnchor）
setOffset(offset:Size):设置控件停靠的偏移量
getOffset():返回控件停靠的偏移量（size）
show():显示控件
hide():隐藏控件
isVisible():判断控件的可见性（Boolean）
initialize(map:Map):抽象方法。调用Map.addControl()方法添加控件时将调用此方法，从而实现该控件的初始化。自定义控件时需要实现此方法，并将元素的DOM元素在该方法中返回。DOM元素需要添加到地图的容器中，使用map.getContainer()方法可获得地图容器元素。（HTMLElement）
通常来说，一般会在自己创建控件的时候使用，一般情况如果只是用百度地图提供的方法的话只要了解就足够了，如果想自己鼓捣一些控件的话，就需要自己去重写咯。

这里需要先介绍点比较常用的控件工具类，我之所以先介绍这些，是因为后面设置的时候会比较方便，比如：ControlAnchor类，
Size类等等。

    下面是基础类的介绍：

    1.Point类:地理坐标点类，该类在初始化的时候就用到了，

        构造方法：
            Point(lng:Number, lat:Number):以指定的经度和纬度创建一个地理点坐标。
            lng:表示地理经度
            lat:表示地理纬度

        方法：
            equals(other:Point)判断两个地点是否相等，当且仅当lng和lat相等时候返回true;

    2.Pixel类:此类表示地图上的一个点，单位为像素。

        构造函数：
            Pixel(x:Number, y:Number):创建像素点对象实例。像素坐标的坐标原点为地图区域的左上角。
            x:表示x坐标
            y:表示y坐标

        方法：
            equals(other:Pixel):判断坐标点是否相等，当且仅当两点的x坐标和y坐标均相等时返回true。

    3.Bounds类:此类表示地理坐标的矩形区域。

        构造方法：
            Bounds(sw:Point, ne:Point):创建一个包含所有给定点坐标的矩形区域。其中sw表示矩形区域的西南角，参数ne表示矩形区域的东北角。

        方法：
            equals(other:Bounds):当且仅当此矩形中的两点参数都等于其他矩形的两点参数时，返回true。(Boolean)

            containsPoint(point:Point):如果点的地理坐标位于此矩形内，则返回true。(Boolean)

            containsBounds(bounds:Bounds):传入的矩形区域完全包含于此矩形区域中，则返回true。(Boolean)

            intersects(other:Bounds):计算与另一矩形的交集区域。(Bounds)

            extend(point:Point):放大此矩形，使其包含给定的点。(none)

            getCenter():返回矩形的中心点。(Point)

            isEmpty():如果矩形为空，则返回true。(Boolean)

            getSouthWest():返回矩形区域的西南角。(Point)

            getNorthEast():返回矩形区域的东北角。(Point)

            toSpan():返回矩形区域的跨度。(Point)

    4.Size类：此类以像素表示一个矩形区域的大小。

        构造方法：
            Size(width:Number, height:Number):以指定的宽度和高度创建一个矩形区域大小对象。
            width:水平方向数值
            height:竖直方向的数值

        方法：
            equals(other:Size):当且仅当此矩形中的宽度和高度都等于其他矩形的宽度和高度时，返回true。

    控制类基础类：

    1.ControlAnchor:此常量表示控件的定位。可以直接用。
        BMAP_ANCHOR_TOP_LEFT:控件将定位到地图的左上角。
        BMAP_ANCHOR_TOP_RIGHT:控件将定位到地图的右上角。
        BMAP_ANCHOR_BOTTOM_LEFT:控件将定位到地图的左下角。
        BMAP_ANCHOR_BOTTOM_RIGHT:控件将定位到地图的右下角。

    2.LengthUnit:常量表示长度单位制。
        BMAP_UNIT_METRIC:公制单位。
        BMAP_UNIT_IMPERIAL:英制单位。

    3.StatusCode:常量用于描述对象当前状态。
        BMAP_STATUS_PERMISSION_DENIED:没有权限。对应数值“6”。(自 1.1 新增)
        BMAP_STATUS_SERVICE_UNAVAILABLE:服务不可用。对应数值“7”。(自 1.1 新增)
        BMAP_STATUS_TIMEOUT:超时。对应数值“8”。(自 1.1 新增)

2.NavigationControl:就是地图的平移缩放控件，就是那种尺子一样的可以拉伸放大的。
    构造方法：
    NavigationControl([type:NavigationControlOptions])
    构造函数中可以传一个配置数组，下面有个配置类NavigationControlOptions介绍了他具有的配置

    方法：
    getType():返回平移缩放控件的类型。(enum NavigationControlType)
    setType(type:enum NavigationControlType):设置平移缩放控件的类型。

    配置选项：
    NavigationControlOptions：平移缩放控件配置类，其中有五个属性可用：
    anchor:控件的停靠位置。(enum ControlAnchor)
    offset:控件的水平偏移值。(Size)
    type:平移缩放控件的类型。(enum NavigationControlType)
    showZoomInfo:是否显示级别提示信息。(自 1.1 新增)(Boolean)
    enableGeolocation:控件是否集成定位功能，默认为false。(自 2.0 新增)(Boolean)

    type选项：
    NavigationControlType类:此常量表示平移缩放控件的类型
        BMAP_NAVIGATION_CONTROL_LARGE:标准的平移缩放控件（包括平移、缩放按钮和滑块）
        BMAP_NAVIGATION_CONTROL_SMALL:仅包含平移和缩放按钮。
        BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮。
        BMAP_NAVIGATION_CONTROL_ZOOM:仅包含缩放按钮。

使用方法：

    var opts={
        anchor:BMAP_ANCHOR_BOTTOM_RIGHT,
        offset:new BMap.Size(10,150),
        type:BMAP_NAVIGATION_CONTROL_LARGE,
        showZoomInfo:true,
        enableGeolocation:true
    };
    mp.addControl(new BMap.NavigationControl(opts));

3.GeolocationControl类:此类是负责进行地图定位的控件，使用html5浏览器定位功能，此类继承Control所有功能。(自 1.4 新增)。

    构造函数：
    GeolocationControl([type:GeolocationControlOptions]):创建一个特定样式的地图定位控件。

    方法：
    location():开始进行定位。
    getAddressComponent()：返回当前的定位信息。若当前还未定位，则返回null。(AddressComponent)

    事件：
    locationSuccess:定位成功后触发此事件。({point, AddressComponent})
    locationError:定位失败后触发此事件。({StatusCode})

    配置选项：
    GeolocationControlOptions表示的是选项信息类：
    anchor:控件的停靠位置，默认定位到地图的右下角。(enum ControlAnchor)
    offset:控件的水平偏移值。(Size)
    showAddressBar:是否显示定位信息面板。默认显示定位信息面板。(Boolean)
    enableAutoLocation:添加控件时是否进行定位。默认添加控件时不进行定位。(Boolean)
    locationIcon:可自定义定位中心点的Icon样式。(Icon)
    注意，Icon类是在覆盖物里面有介绍，这里就先不介绍了。后面括号代表的是类型，方法的话代表的是返回类型，下同。

    使用方法：
        var opts2={
            anchor:BMAP_ANCHOR_TOP_LEFT,
            offset:new BMap.Size(10,400),
            showAddressBar:false,
            enableGeolocation:false,
            locationIcon:暂时不尝试
        }
        var geo=new BMap.GeolocationControl(opts2);
        mp.addControl(geo);

4.OverviewMapControl:此类表示缩略地图控件。

    构造函数：
        OverviewMapControl([opts:OverviewMapControlOptions]):创建一个缩略地图控件实例。

    方法：
        changeView():切换缩略地图控件的开合状态。(none)
        setSize(size:Size):设置缩略地图的大小。(none)
        getSize():返回缩略地图的大小。(Size)

    事件：
        viewchanged:缩略地图开合状态发生变化后触发此事件。(event{type, target, isOpen})
        viewchanging:缩略地图开合状态发生变化过程中触发此事件。(event{type, target})

    配置信息：
        OverviewMapControlOptions配置信息：
            anchor:控件的停靠位置。(enum ControlAnchor)
            offset:控件的偏移值。(Size)
            size:缩略地图控件的大小。(Size)
            isOpen:缩略地图添加到地图后的开合状态，默认为关闭。(Boolean)

    使用方法：
        var opts3={
            anchor:BMAP_ANCHOR_TOP_LEFT,
            offset:new BMap.Size(10,10),
            isOpen:true,
            size:new BMap.Size(400,200)
        }
        var over=new BMap.OverviewMapControl(opts3);
        mp.addControl(over);

5.ScaleControl类：此类表示比例尺控件。
    构造函数：
        ScaleControl([opts:ScaleControlOptions]):创建一个比例尺控件。

    方法：
        getUnit():返回比例尺单位制。(enum LengthUnit)
        setUnit(unit:enum LengthUnit):设置比例尺单位制。(none)

    配置信息:
        ScaleControlOptions配置信息：
        anchor：控件的停靠位置
        offset：控件的偏移值

    使用方法:
        var opts4={
            anchor:BMAP_ANCHOR_TOP_RIGHT,
            offset:new BMap.Size(10,10),
        }
        var scale=new BMap.ScaleControl(opts4);
        mp.addControl(scale);

6.CopyrightControl类:此类表示版权控件，您可以在地图上添加自己的版权信息。每一个版权信息需要包含如下内容：版权的唯一标识、版权内容和其适用的区域范围。

    构造方法：
        CopyrightControl([opts:CopyrightControlOptions]):创建一个版权控件实例。

    方法：
        addCopyright(copyright:Copyright):添加版权信息。
        removeCopyright(id):移除版权信息。
        getCopyright(id):返回单个版权信息。(Copyright)
        getCopyrightCollection():返回版权信息列表。(Array<Copyright>)

    配置信息：
        CopyrightControlOptions配置信息：
            anchor：控件的停靠位置。
            offset：控件的偏移值。

        Copyright：此类表示一条版权信息。可作为CopyrightControl.addCopyright()方法的参数。它没有构造函数，但可通过对象字面量形式表示。
            id：该版权信息的唯一标识符(Number)
            content:该版权的文本信息，用于显示在地图上，支持HTML内容。(String)
            bounds:该版权信息所适用的地理区域。(Bounds)

    使用方法：
        var opts5={
            anchor:BMAP_ANCHOR_TOP_RIGHT,
            offset:new BMap.Size(10,10),
        }
        var copy=new BMap.CopyrightControl(opts5);
        var cr=new BMap.Copyright();
        cr.id=000221012201;
        cr.content="测试的版权信息";
        var b=new BMap.Bounds(new BMap.Point(1,1),new  BMap.Point(150,150));
        cr.bounds=b;
        copy.addCopyright(cr);
        mp.addControl(copy);
        var cr1=copy.getCopyright(000221012201);
        alert(cr1.id+"-->"+cr1.content+"-->")

7.MapTypeControl类：负责切换地图类型的控件，此类继承Control所有功能。

    构造方法：
        MapTypeControl([opts:MapTypeControlOptions])：创建地图类型控件。(自 1.1 新增)

    配置信息：
        MapTypeControlOptions：通过对象字面量形式表示（自 1.2 新增）。
            type:控件样式。(MapTypeControlType)
            mapTypes:控件展示的地图类型，默认为普通图、卫星图、卫星加路网混合图和三维图。通过此属性可配置控件展示的地图类型。(Array<MapType>)

        MapTypeControlType常量：
            BMAP_MAPTYPE_CONTROL_HORIZONTAL:按钮水平方式展示，默认采用此类型展示。
            BMAP_MAPTYPE_CONTROL_DROPDOWN:按钮呈下拉列表方式展示。
            BMAP_MAPTYPE_CONTROL_MAP:以图片方式展示类型控件，设置该类型后无法指定maptypes属性。

    使用方法：
        var opts6={
            type:BMAP_MAPTYPE_CONTROL_MAP
        }
        var maptype=new BMap.MapTypeControl(opts6);
        mp.addControl(maptype);

8.PanoramaControl类：负责切换至全景地图的控件，此类继承Control所有功能。（自2.0新增）

    构造方法：
        PanoramaControl()：创建全景控件实例。

    使用方法：
        mp.addControl(new BMap.PanoramaControl());

9.下面是比较高级的用法，就是自定义控件类，其实一般够用了，如果实在不够的话，可以看下面的例子，转自官方文档：
    步骤：
    1.定义一个自定义控件的构造函数。 
    2.设置自定义控件构造函数的prototype属性为Control的实例，以便继承控件基类。 
    3.实现initialize()方法并提供defaultAnchor和defaultOffset属性。

    // 定义一个控件类，即function    
    function ZoomControl(){    
        // 设置默认停靠位置和偏移量  
        this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;    
        this.defaultOffset = new BMap.Size(10, 10);    
    }    
    // 通过JavaScript的prototype属性继承于BMap.Control   
    ZoomControl.prototype = new BMap.Control();
    初始化自定义控件
    当调用map.addControl()方法添加自定义控件时，API会调用该对象的initialize()方法用来初始化控件，您需要实现此方法并在其中创建控件所需的DOM元素，并添加DOM事件。所有自定义控件中的DOM元素最终都应该添加到地图容器（即地图所在的DOM元素）中去，地图容器可以通过map.getContainer()方法获得。最后initialize()方法需要返回控件容器的DOM元素。
    // 自定义控件必须实现initialize方法，并且将控件的DOM元素返回   
    // 在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中   
    ZoomControl.prototype.initialize = function(map){    
    // 创建一个DOM元素   
     var div = document.createElement("div");    
    // 添加文字说明    
     div.appendChild(document.createTextNode("放大2级"));    
     // 设置样式    
     div.style.cursor = "pointer";    
     div.style.border = "1px solid gray";    
     div.style.backgroundColor = "white";    
     // 绑定事件，点击一次放大两级    
     div.onclick = function(e){  
      map.zoomTo(map.getZoom() + 2);    
     }    
     // 添加DOM元素到地图中   
     map.getContainer().appendChild(div);    
     // 将DOM元素返回  
     return div;    
     }
    添加自定义控件
    添加自定义控件与添加其他控件方法一致，调用map.addControl()方法即可。
    // 创建控件实例    
    var myZoomCtrl = new ZoomControl();
    // 添加到地图当中 map.addControl(myZoomCtrl);

10.基础类Map中对于控件类的操作：

    addControl(control:Control):将控件添加到地图，一个控件实例只能向地图中添加一次。(none)

    removeControl(control:Control):从地图中移除控件。如果控件从未被添加到地图中，则该移除不起任何作用。(none)

    getContainer():返回地图的容器元素。当创建用户自定义控件时，需要自行实现Control.initialize()方法，并将控件的容器元素添加到地图上，通过此方法可获得地图容器。(HTMLElement)

请看下一篇，如果喜欢，请点赞哈，谢谢！