百度地图API-控件

初始化百度地图的基础方法我们已经学会了，那么，想让我们的地图展示的更美观，体验度更好，自然离不开百度地图API给我们提供的丰富的插件。同时呢，我们还可以通过Control类自定义控件。那么，百度地图API给我们提供的插件有哪些呢？

Control：控件的抽象基类，所有控件均继承此类的方法，属性，并且通过此类可以自定义我们自己的控件。
NavigationControl：地图平移缩放控件，PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能。移动端提供缩放控件，默认位于地图右下方。
OverviewMapControl：缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图。
ScaleControl：比例尺控件，默认位于地图左下方，显示地图的比例关系。
MapTypeControl：地图类型控件，默认位于地图右上方。
CopyrightControl：版权控件，默认位于地图左下方。
GeolocationControl:定位控件，针对移动端开发，默认位于地图左下方。

了解了相关的控件之后，我们就可以开始给我们上节初始化的地图添加空间啦。如下：

 var map = new BMap.Map("container");             //创建地图实例

 var point = new BMap.Point(116.404,39.915);      //创建点坐标

 map.centerAndZoom(point,15);                　　　//初始化地图

 map.addControl(new BMap.NavigationControl());  　//向地图添加控件

我们刚刚给地图添加了一个平移缩放控件，现在我们再多添加些控件进去。如下：

 map.addControl(new BMap.OverviewmapControl); //向地图添加缩略控件

 map.addCoontrol(new BMap.MapTypeControl);    //向地图添加地图类型控件

 map.setCurrentCity("北京");                   //仅当设置城市信息时，MapTypeControl的切换功能才可用

我们可以自定义这些控件的位置，如果不指定，他们会按默认的排列。

初始化控件时，可提供一个可选参数，其中的anchor和offset属性共同控制控件在地图上的位置。

控件停靠位置 anchor表示控件的停靠位置，即控件停靠在地图的哪个角。当地图尺寸发生变化时，控件会根据停靠位置的不同来调整自己的位置。anchor允许的值为：

BMAP_ANCHOR_TOP_LEFT 表示控件定位于地图的左上角。
BMAP_ANCHOR_TOP_RIGHT 表示控件定位于地图的右上角。
BMAP_ANCHOR_BOTTOM_LEFT 表示控件定位于地图的左下角。
BMAP_ANCHOR_BOTTOM_RIGHT 表示控件定位于地图的右下角。

除了指定停靠位置外，还可以通过偏移量来指示控件距离地图边界有多少像素。如果两个控件的停靠位置相同，那么控件可能会重叠在一起，这时就可以通过偏移值使二者分开显示。

由于API默认会有版权信息，因此需要添加一些偏移值以防止控件重叠。如下：

 /**

 * 向地图添加比例尺控件，并设置一些偏移值，防止控件重叠

 */

 var opts = {offset:BMap.Size(150,5)}

 map.addControl(new BMap.ScaleControl(opts));

我们除了可以控制控件的位置和偏移量之外，还可以设置控件的外观样式，例如NavigationControl 平移缩放控件的样式如下（其他还有很多控件的样式这里就不一一赘述）：

BMAP_NAVIGATION_CONTROL_LARGE 表示显示完整的平移缩放控件
BMAP_NAVIGATION_CONTROL_SMALL 表示显示小型的平移缩放控件
BMAP_NAVIGATION_CONTROL_PAN 表示只显示控件的平移部分功能
BMAP_NAVIGATION_CONTROL_ZOOM 表示只显示控件的缩放部分功能

下面我们对平移缩放控件设置一下外观，如下：

 /**

 * 向地图添加平移缩放控件，并设置样式

 */

 var opts = {type:BMAP_NAVIGATION_CONTROL_LARGE}

 map.addControl(new BMap.NavigationControl(opts));

除了百度地图API给我们提供的控件外，我们还可以自定义属于我们自己的控件，步骤如下：

定义一个自定义控件的构造函数。
设置自定义控件构造函数的prototype属性为Control的实例，以便继承控件基类。
实现initialize（）方法并提供defaultAnchor和defaultOffset属性。

下面我们在刚才地图的基础上自定义一个控件：如下：

 　　　　　　　　　　/**

                  * 自定义控件类

                  */

                 function ZoomControl(){

                     //设置默认停靠位置和偏移量

                     this.defaultAnchor = BMap_ANCHOR_TOP_LEFT;

                     this.defaultOffset = new BMap.Size(10,10);

                 }

                 //通过javaScript的prototype属性继承于BMap.Control

                 ZoomControl.prototype = new BMap.Control();

                 //自定义控件必须实现initialize方法，并且将控件的DOM元素返回

                 ZoomControl.prototype.initialize = function(map){

                     //创建一个ＤＯＭ元素

                     var div = document.createDocument("div");

                     //添加文字说明

                     div.appendChild(document.createTextNode("放大2级"));

                     //设置样式

                     div.style.cursor="pointer";

                     div.style.border="1px solide gray";

                     div.style.backgroundColor="white";

                     //绑定事件，点击1次放大2级

                     div.onclick = function(e){

                         map.zoomTo(map.getZoom()+2);

                     }

                     //添加DOM元素到地图中，

                     map.getContainer.appendChild(div);

                     //将DOM元素返回

                     return div;

                 }

                 //创建控件实例

                 var myZoomCtrl = new ZoomControl();

                 map.addControl(myZoomCtrl);

效果如下图：

百度地图API-控件

好啦，今天的内容就到这里啦，总结一下：

主要掌握百度地图API给我们提供的一些控件，当然还有其他的控件，多运用他们，才能熟能生巧，另外，自定义控件部分要记住几个步骤，。总之，多练习才是熟练应用的制胜法宝。

秒客网

百度地图API-控件

相关文章