control


Table of Contents

  • ##1 Map Control Overview
  • 2 Add controls to the map
  • ##3 Control control location
  • 4 Modify the control configuration
    • ##5
  • Custom controls

    Overview of Map Controls

    The UI elements on Baidu Map that are responsible for interacting with the map are called controls. Baidu Map API provides a wealth of controls, and you can also implement custom controls through the Control class.

    The controls provided in the map API are:

    Control: the abstract base class of the control. All controls inherit the methods and properties of this class. . This class allows you to implement custom controls.

    NavigationControl: MapPan and Zoom Control, on the PC side, it is located in the upper left corner of the map by default. It contains the functions of controlling the pan and zoom of the map. The mobile version provides a zoom control, which is located at the bottom right of the map by default.

    OverviewMapControl: Thumbnail map control, located at the bottom right of the map by default, is a foldable thumbnail map.

    ScaleControl: Scale control, located at the bottom left of the map by default, displays the scale relationship of the map.

    MapTypeControl: Map type control, located in the upper right corner of the map by default.

    CopyrightControl: Copyright Control, located at the bottom left of the map by default.

    GeolocationControl: Location control, developed for mobile terminals, located at the bottom left of the map by default.

    Add controls to the map

    You can use the Map.addControl() method to add controls to the map. The map needs to be initialized before this. For example, to add a standard map control to a map, add the following to your code: 

    var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);    
map.addControl(new BMap.NavigationControl());

    You can add multiple controls to the map. In this example we add a pan and zoom control, a scale control, and a thumbnail control to the map. Once controls are added to the map, they take effect immediately. 

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

    Control the position of the control

    When initializing the control, you can provide an optional parameter, in which the anchor and offset properties jointly control the position of the control on the map.

    Control docking position Anchor represents the docking position of the control, that is, which corner of the map the control is docked at. When the map size changes, the control will adjust its position according to the docking location. The allowed values ​​for anchor are:

    BMAP_ANCHOR_TOP_LEFT indicates that the control is positioned in the upper left corner of the map.

    BMAP_ANCHOR_TOP_RIGHT indicates that the control is positioned in the upper right corner of the map.

    BMAP_ANCHOR_BOTTOM_LEFT indicates that the control is positioned in the lower left corner of the map.

    BMAP_ANCHOR_BOTTOM_RIGHT indicates that the control is positioned in the lower right corner of the map.

    Con1.png


    Control position offset

    In addition to specifying the docking position, the offset can also be used to indicate the control distance How many pixels are there in the map border. If the docking positions of two controls are the same, the controls may overlap. In this case, the offset value can be used to display the two controls separately.

    This example places the scale bar in the lower left corner of the map. Since the API will have copyright information by default, some offset values ​​need to be added to prevent the controls from overlapping. 

    var opts = {offset: new BMap.Size(150, 5)}    
map.addControl(new BMap.ScaleControl(opts));

    Modify control configuration

    The map API control provides a wealth of configuration parameters, you can refer to the API documentation to modify them to get the control appearance that meets your requirements. For example, the NavigationControl control provides the following types:

    BMAP_NAVIGATION_CONTROL_LARGE indicates that the complete pan and zoom control is displayed.

    BMAP_NAVIGATION_CONTROL_SMALL means to display a small pan and zoom control.

    BMAP_NAVIGATION_CONTROL_PAN means that only the pan function of the control is displayed.

    BMAP_NAVIGATION_CONTROL_ZOOM means that only the zoom part of the control is displayed.

    The following picture shows the appearance of the above different types of controls from left to right:

    control.png

    The first 4 in the above picture are the pan and zoom control styles on the PC side. The last one is the mobile zoom control style.

    The following example will adjust the appearance of the pan and zoom map control. 

    var opts = {type: BMAP_NAVIGATION_CONTROL_SMALL}    
map.addControl(new BMap.NavigationControl(opts));

    Custom controls

    Baidu Map API allows you to create custom map controls by inheriting Control.

    To create a usable custom control, you need to do the following:

    1. Define a constructor for the custom control. 2. Set the prototype attribute of the custom control constructor to an instance of Control so that it can inherit the control base class. 3. Implement the initialize() method and provide defaultAnchor and defaultOffset properties.

    Define the constructor and inherit Control

    First you need to define the constructor of the custom control and provide two properties, defaultAnchor and defaultOffset, in the constructor so that the API Position the control correctly, and then let it inherit from Control. In the following example we define a control named ZoomControl, which will zoom in on the map by two levels each time it is clicked. It has a text logo instead of the graphical icon used in the pan and zoom controls. 

    // 定义一个控件类，即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();

    Initialize custom control

    When the map.addControl() method is called to add a custom control, the API The object's initialize() method will be called to initialize the control. You need to implement this method and create the DOM elements required by the control in it, and add DOM events. All DOM elements in custom controls should eventually be added to the map container (that is, the DOM element where the map is located). The map container can be obtained through the map.getContainer() method. Finally, the initialize() method needs to return the DOM element of the control container. 

    // 自定义控件必须实现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;    
 }

    Add a custom control

    The method of adding a custom control is the same as adding other controls, call map.addControl () method is enough. 

    // 创建控件实例    var myZoomCtrl = new ZoomControl();

    // Add to map map.addControl(myZoomCtrl);

←
→