How to add controls for scale, thumbnail, pan and zoom on Baidu map_javascript skills

The following is a detailed introduction to the Baidu map adding controls for scale, thumbnails, panning and zooming using pictures and texts.

Map Control Overview
The UI elements on Baidu Maps 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: Map pan and zoom control. It is located in the upper left corner of the map by default on the PC. It includes the function 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, showing 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: Positioning 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 your map, add the following to your code:

Copy 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());

Multiple controls can be added 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.

Copy code 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 switching function of MapTypeControl can only be used when setting city information

Control control position
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 indicates 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 means 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 use the offset to indicate how many pixels the control is from the map boundary. 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 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.

Copy code The code is as follows:

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

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

Copy code The code is as follows:

BMAP_NAVIGATION_CONTROL_LARGE indicates that the complete pan and zoom controls are displayed.
BMAP_NAVIGATION_CONTROL_SMALL indicates that a small pan and zoom control is displayed.
BMAP_NAVIGATION_CONTROL_PAN indicates that only the panning function of the control is displayed.
BMAP_NAVIGATION_CONTROL_ZOOM indicates that only the zoom part of the control is displayed.

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

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

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

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

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

Add thumbnail

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <style type="text/css">
    body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
    #allmap{width:100%;height:500px;}
    #r-result{width:100%;margin-top:5px;}
    p{margin:5px; font-size:14px;}
  </style>
  <script type="text/javascript" src="http://api.map.baidu.com/api&#63;v=2.0&ak=您的密钥"></script>
  <title>添加/删除地图类型、缩略图控件</title>
</head>
<body>
  <div id="allmap"></div>
  <div id="r-result">
    <input type="button" onclick="add_control();" value="添加" />
    <input type="button" onclick="delete_control();" value="删除" />
  </div>
  <p>点击地图类型控件切换普通地图、卫星图、三维图、混合图（卫星图+路网），右下角是缩略图，点击按钮查看效果</p>
</body>
</html>
<script type="text/javascript">
  // 百度地图API功能
  var map = new BMap.Map("allmap");
  map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

  var mapType1 = new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]});
  var mapType2 = new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_LEFT});

  var overView = new BMap.OverviewMapControl();
  var overViewOpen = new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT});
  //添加地图类型和缩略图
  function add_control(){
    map.addControl(mapType1);     //2D图，卫星图
    map.addControl(mapType2);     //左上角，默认地图控件
    map.setCurrentCity("北京");    //由于有3D图，需要设置城市哦
    map.addControl(overView);     //添加默认缩略地图控件
    map.addControl(overViewOpen);   //右下角，打开
  }
  //移除地图类型和缩略图
  function delete_control(){
    map.removeControl(mapType1);  //移除2D图，卫星图
    map.removeControl(mapType2);
    map.removeControl(overView);
    map.removeControl(overViewOpen);
  }
</script>

Rendering

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