Scale, thumbnail, translation scaling Baidu Map Add control method _javascript Tips

Below through the way to give you a detailed description of the next scale, thumbnails, translation scaling Baidu Map add control methods.

Overview of Map controls
The UI element on the Baidu map that interacts with the map is called a control. The Baidu Map API provides rich controls, and you can also implement custom controls by using the control class.

The controls provided in the Map API are:

Control: The abstract base class for controls that inherit the methods and properties of this class. This class enables you to implement custom controls.
Navigationcontrol: Map translation Zoom control, PC side default located in the top left of the map, it contains control map translation and scaling functions. The mobile side provides the zoom control, which is located at the bottom right of the map.
Overviewmapcontrol: Thumbnail map control, which defaults to the bottom right of the map, is a collapsible thumbnail map.
Scalecontrol: Scale control, the default is located at the bottom left of the map, showing the proportional relationship of the map.
Maptypecontrol: Map type control, default located on top right of map.
Copyrightcontrol: Copyright control, the default is located at the bottom left of the map.
Geolocationcontrol: Positioning control, development for mobile end, default located at lower left of map
Add controls to a map
You can use the Map.addcontrol () method to add controls to the map. Before this, the map needs to be initialized. For example, to add a standard map control to a map, you can add the following in your code:

Copy Code code as follows:

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 a map. In this example, we add a pan zoom control, a scale control, and a thumbnail control to the map. When you add controls to the map, they take effect immediately.

Copy Code code as follows:

Map.addcontrol (New Bmap.navigationcontrol ());
Map.addcontrol (New Bmap.scalecontrol ());
Map.addcontrol (New Bmap.overviewmapcontrol ());
Map.addcontrol (New Bmap.maptypecontrol ());
Map.setcurrentcity ("Beijing"); Maptypecontrol switching is available only if you are setting up city information

Controlling the position of controls
When you initialize a control, you provide an optional parameter in which the anchor and offset properties collectively control the position of the control on the map.

The control docking location anchor represents the docked position of the control, that is, which corner of the map the control is docked to. When the size of the map changes, the control adjusts its position according to the different docking positions. The values allowed by 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 at the lower-right corner of the map.

Control position Offset

In addition to specifying a docking location, you can also indicate how many pixels the control is from the map boundary by offset. If the two controls are docked in the same position, the controls may overlap, and the offset values allow the two to be displayed separately.

This example places a scale in the lower-left corner of the map, and because the API defaults to copyright information, you need to add some offset values to prevent the control from overlapping.

Copy Code code as follows:

var opts = {Offset:new bmap.size (150, 5)}
Map.addcontrol (New Bmap.scalecontrol (opts));

Modify Control Configuration
The map API controls provide rich configuration parameters, and you can refer to the API documentation to modify them to get the control skins that fit the requirements. For example, the Navigationcontrol control provides the following types:

Copy Code code as follows:

Bmap_navigation_control_large indicates that the full pan zoom control is displayed.
Bmap_navigation_control_small indicates a small panning zoom control.
Bmap_navigation_control_pan indicates that only the translation part of the control is displayed.
Bmap_navigation_control_zoom indicates that only the zoom part of the control function is displayed.

The following illustration shows the different types of control skins in turn from left to right:

The top 4 of the above figure translate the zoom control style for the PC side and the last one to zoom the control style for the mobile end.

The following example resizes the translation to scale the map control.

The top 4 of the above figure translate the zoom control style for the PC side and the last one to zoom the control style for the mobile end.

The following example resizes the translation to scale the map control.

Add thumbnails

<! DOCTYPE html>  

Effect chart

The above is the entire content of this article, I hope you like.