Baidu map API-Controls

Baidu map API-Controls

Here we will introduce the space of Baidu question map. The control is mainly responsible for map interaction. 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 includes 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 lower left of the map by default.

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:

Var map = new BMap. map ("container"); // var point = new BMap. point (116.404, 39.915); // create a Point map. centerAndZoom (point, 15); map. addControl (new BMap. navigationControl (); // map Pan zoom control

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.

Var map = new BMap. map ("container"); // var point = new BMap. point (116.404, 39.915); // create a Point map. centerAndZoom (point, 15); map. addControl (new BMap. navigationControl (); // map translation and scaling control map. addControl (new BMap. scaleControl (); // scale control map. addControl (new BMap. overviewMapControl (); // thumbnail map control map. addControl (new BMap. mapTypeControl (); // map type control var cr = new BMap. copyrightControl ({anchor: BMAP_ANCHOR_TOP_LEFT, offset: createSize (650, 5) // sets the position of the Copyright Control}); var bs = map. getBounds (); // returns the cr in the visible area of the map. addCopyright ({id: 1, content: "<a href = '#' style = 'font-size: 20px; background: yellow '> Custom Copyright Control </a> ", bounds: bs}); // Copyright (id, content, bounds) Class As CopyrightControl. the parameter map of addCopyright () method. addControl (cr); // Add the copyright control map. setCurrentCity ("Beijing"); // This function is available only when the city information is set.

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.

Anchor indicates the position of the control, that 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.

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.

Var offset = {offset: new BMap. size (150, 5)}; // offset map. addControl (newBMap. navigationControl (offset); // Add a translation and scaling space. The position is the position after the offset.

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:

Ø BMAP_NAVIGATION_CONTROL_LARGE indicates that the complete pan scaling control is displayed. Ø BMAP_NAVIGATION_CONTROL_SMALL indicates that a small pan scaling 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.

Var offset1 = {offset: new BMap. size (250, 5), type: BMAP_NAVIGATION_CONTROL_LARGE}; // offset map. addControl (new BMap. navigationControl (offset1); var offset2 = {offset: new BMap. size (350, 5), type: BMAP_NAVIGATION_CONTROL_SMALL}; map. addControl (new BMap. navigationControl (offset2); var offset3 = {offset: new BMap. size (450, 5), type: BMAP_NAVIGATION_CONTROL_PAN}; map. addControl (new BMap. navigationControl (offset3); var offset4 = {offset: new BMap. size (550, 5), type: BMAP_NAVIGATION_CONTROL_ZOOM}; // offset map. addControl (new BMap. navigationControl (offset4 ));

Baidu map API allows you to inherit Control to create custom map controls. To create available custom controls, you need to do the following:

1. Define the constructor of a custom control.

2. Set the prototype attribute of the custom Control constructor to the Control instance to inherit the Control base class.

3. Implement the initialize () method and provide the defaultAnchor and defaultOffset attributes.

First, you need to define the constructor of the custom Control, and provide the defaultAnchor and defaultOffset attributes in the constructor so that the API can correctly locate the Control position and inherit from the Control. In the following example, we define a control named ZoomControl. Each click will enlarge the map at two levels. It has a text identifier instead of a graphical icon used in the pan zoom control.

// Define a control class, that is, function ZoomControl () {// set the default stop position this. defaultAnchor = BMAP_ANCHOR_TOP_LEFT; // set the offset this. defaultOffset = new BMap. size (10, 10);} // inherits from BMap through the prototype attribute of JavaScript. control ZoomControl. prototype = new BMap. control ();

When map. when addControl () method is used to add a custom control, the API calls the initialize () method of the object to initialize the control. You need to implement this method and create the DOM elements required by the control, and add DOM events. All DOM elements in the custom control should 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. The initialize () method must return the DOM element of the control container.

// The custom control must implement the initialize method and return the DOM elements of the Control. // create a div element in this method as the control container, and add it to the map container ZoomControl. prototype. initialize = function (map) {// create a DOM element var div = document. createElement ("div"); // Add text description div. appendChild (document. createTextNode ("zoom in 2"); // sets the style div. style. cursor = "pointer"; div. style. border = "1px solid gray"; div. style. backgroundColor = "red"; // bind the event. Click one to enlarge the two-level div. onclick = function (e) {map. zoomTo (map. getZoom () + 2); // zoom in twice} // Add the DOM element to the map. getContainer (). appendChild (div); // return the return div of the DOM element ;}

The method for adding a custom control is the same as that for adding other controls. Call the map. addControl () method.

Function load () {// BMap is the namespace of Baidu map API, where all classes are var map = new BMap. map ("container"); // var point = new BMap. point (116.404, 39.915); // create a Point map. centerAndZoom (point, 15); // create a control instance var myZoomCtrl = new ZoomControl (); // Add it to the map. addControl (myZoomCtrl );}

After successful access, we can see a red area in the upper left corner. After clicking it, the map will be zoomed in twice.

The document code is tested by yourself. For more information, see the Baidu developer documentation. The Code has changed. Please leave a message to correct it ~