How to add controls to Baidu map based on scale, thumbnail, and Pan scaling _ javascript tips-js tutorial

This article mainly introduces how to add controls to Baidu maps based on scale, thumbnail, and translation scaling. We all know that Baidu map API provides a wide range of controls, you can also use the Control class to implement custom controls, for more information about how to add controls to Baidu maps, see the following illustration.

Overview
The UI element responsible for interacting with maps on Baidu maps is called a control. Baidu map API provides a variety of controls. You can also use the Control class to implement custom controls.

The map API provides the following controls:

Control: the abstract base class of the Control. All controls inherit the methods and attributes of this class. With this class, you can implement custom controls.
NavigationControl: the map translation and scaling control. The PC side is located in the upper-left corner of the map by default. It provides the function of controlling the map translation and scaling. The mobile terminal provides a scaling control, which is located at the bottom right of the map by default.
OverviewMapControl: the thumbnail map control, which is located at the bottom right of the map by default. It is a foldable thumbnail map.
ScaleControl: The scale control. It is located at the bottom left of the map by default and displays the proportional relationship of the map.
MapTypeControl: Map type control, which is located in the upper-right corner of the map by default.
CopyrightControl: Copyright Control, which is located at the bottom left of the map by default.
GeolocationControl: Positioning Control, developed for mobile terminals. It is located at the bottom left of the map by default.
Add controls to a map
You can use Map. addControl () to add controls to a Map. Before that, the map needs to be initialized. For example, to add a standard map control to a map, add the following content to the Code:

The Code is 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 zoom control, a scale control, and a thumbnail control to the map. After you add controls to a map, they take effect immediately.

The Code is 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"); // The MapTypeControl switchover function is available only when city information is set.

Control Widget location
When initializing a control, you can provide an optional parameter. The anchor and offset attributes jointly control the position of the control on the map.

The control dock location anchor indicates the control's Dock location, which is the corner of the map where the control is docked. When the map size changes, the widget adjusts its position based on the position of the stop. The value of anchor is:
BMAP_ANCHOR_TOP_LEFT indicates that the control is located in the upper left corner of the map.
BMAP_ANCHOR_TOP_RIGHT indicates that the control is located in the upper right corner of the map.
BMAP_ANCHOR_BOTTOM_LEFT indicates that the control is located in the lower left corner of the map.
BMAP_ANCHOR_BOTTOM_RIGHT indicates that the control is located in the lower right corner of the map.

Widget location offset

In addition to specifying the dock location, the offset can also be used to indicate the number of pixels between the control and the map boundary. If the two controls have the same dock position, the controls may overlap. In this case, the two controls can be displayed separately through the offset value.

In this example, the scale is placed in the lower left corner of the map. Because the API has copyright information by default, some offset values need to be added to prevent control overlap.

The Code is as follows:

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

Modify Control Configuration
Map API controls provide a wide range of configuration parameters. You can refer to the API documentation to modify them to get the appearance of the required controls. For example, the NavigationControl control provides the following types:

The Code is as follows:

BMAP_NAVIGATION_CONTROL_LARGE indicates that the complete pan zoom control is displayed.
BMAP_NAVIGATION_CONTROL_SMALL indicates that a small zoom control is displayed.
BMAP_NAVIGATION_CONTROL_PAN indicates that only the control's pan function is displayed.
BMAP_NAVIGATION_CONTROL_ZOOM indicates that only the zoom function of the control is displayed.

The display of the preceding controls is displayed from left to right:

The first four are the PC-side translation and scaling controls, and the last is the mobile-side scaling control style.

The following example shows how to adjust the appearance of the pan-zoom map control.

The first four are the PC-side translation and scaling controls, and the last is the mobile-side scaling control style.

The following example shows how to adjust the appearance of the pan-zoom map control.

Add thumbnail