Baidu Map Add control--scale, thumbnail, pan zoom

Overview of Map controls

The UI element on the Baidu map that interacts with the map is called a control. Rich controls are available in the Baidu Map API, and you can also implement custom controls by using the control class.

The controls available in the Map API are:

• • Control: The abstract base class for controls in which all controls inherit methods, properties of this class. This class enables you to implement a custom control.
  • Navigationcontrol: The map Pan zoom control , which defaults to the top left side of the map, contains the ability to control the panning and zooming of the map. The mobile side provides a zoom control, which is located by default in the lower right of the map.
  • Overviewmapcontrol: The thumbnail map control , which is located at the bottom right of the map by default, is a collapsible thumbnail map.
  • Scalecontrol: A scale control that, by default, is located at the bottom left of the map, showing the map's scale relationship.
  • Maptypecontrol: The map type control , which is located at the top right of the map by default.
  • Copyrightcontrol: Copyright Control , which is located at the bottom left of the map by default.
  • Geolocationcontrol: positioning controls , developed for mobile, default at the bottom left of the map

adding controls to a map

You can use the Map.addcontrol () method to add controls to your map. prior to 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:

var New Bmap.map ("container");    Map.centerandzoom (new bmap.point (116.404, 39.915), one by one);    Map.addcontrol (new Bmap.navigationcontrol ());

You can add multiple controls to a map. In this example, we add a pan zoom control, a scale bar control, and a thumbnail control to the map. When you add controls to your 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 switch function is available only if city information is set

controlling the location of controls

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

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

Control position Offset

In addition to specifying the docking position, you can also indicate how many pixels the control is from the map boundary by an offset. If the docking position of the two controls is the same, the controls may overlap, so that they can be displayed separately by an offset value.

This example places the scale bar in the lower-left corner of the map, and because the API has copyright information by default, you need to add some offset values to prevent the controls from overlapping.

var New Bmap.size (5)}    Map.addcontrol (new Bmap.scalecontrol (opts));

Modify Control Configuration

The map API's controls provide a rich set of configuration parameters that you can refer to the API documentation to modify to get the appearance of the control that meets your requirements. For example, the Navigationcontrol control provides the following types:

• Bmap_navigation_control_large indicates that the full Pan zoom control is displayed.
• Bmap_navigation_control_small indicates that a small pan zoom control is displayed.
• Bmap_navigation_control_pan indicates that only the translation portion of the control is displayed.
• Bmap_navigation_control_zoom indicates that only the zoom portion of the control is displayed .

The different types of controls appear from left to right, in turn:

The top 4 is the PC-side Pan zoom control style, and the last one is the zoom control style for the mobile side.

The following example adjusts the appearance of a pan-scaled map control.

Add a thumbnail image

<!DOCTYPE HTML><HTML><Head>    <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" />    <Metaname= "Viewport"content= "initial-scale=1.0, User-scalable=no" />    <styletype= "Text/css">Body, HTML{width:100%;Height:100%;margin:0;font-family:"Microsoft Jas Black";}#allmap{width:100%;Height:500px;}#r-result{width:100%;Margin-top:5px;}P{margin:5px;font-size:14px;}    </style>    <Scripttype= "Text/javascript"src= "http://api.map.baidu.com/api?v=2.0&ak= your Key"></Script>    <title>Add/Remove map types, thumbnail controls</title></Head><Body>    <DivID= "Allmap"></Div>    <DivID= "R-result">        <inputtype= "button"onclick= "Add_control ();"value= "Add" />        <inputtype= "button"onclick= "Delete_control ();"value= "Delete" />    </Div>    <P>Click on the map type control to switch to normal, satellite, three-dimensional, mixed (satellite + network), the lower right corner is the thumbnail, click the button to see the effect</P></Body></HTML><Scripttype= "Text/javascript">    //Baidu Map API features    varMap= NewBmap.map ("Allmap"); Map.centerandzoom (NewBmap.point (116.404, 39.915),  One); varMapType1= NewBmap.maptypecontrol ({maptypes: [Bmap_normal_map,bmap_hybrid_map]}); varmapType2= NewBmap.maptypecontrol ({anchor:bmap_anchor_top_left}); varOverview= NewBmap.overviewmapcontrol (); varOverviewopen= NewBmap.overviewmapcontrol ({isOpen:true, anchor:bmap_anchor_bottom_right}); //add map type and thumbnail image    functionAdd_control () {Map.addcontrol (mapType1); //2D diagram, satellite mapMap.addcontrol (mapType2); //Upper left corner, default map controlmap.setcurrentcity ("Beijing"); //because of the map, you need to set up a city.Map.addcontrol (Overview); //add default thumbnail map controlMap.addcontrol (Overviewopen); //Lower right corner, open    }    //removing map types and thumbnails    functionDelete_control () {Map.removecontrol (mapType1); //Remove the map, satellite mapMap.removecontrol (mapType2);        Map.removecontrol (Overview);    Map.removecontrol (Overviewopen); }</Script>

Thanks: Thank you for your patience and reading!

Baidu Map Add control--scale, thumbnail, pan zoom