Map Controls

This article introduces commonly used map controls, including map toolbar, scale, positioning.

1、Basic Map Controls

You can add basic map controls through plugins. Map controls include toolbar, scale, location, eagle eye, and control compass.

1.1 Create Map

const map = new AMap.Map("container", {
  zoom: 10, 
  center: [100.491422, 13.749313],
  showOversea: true, //Enable world Map
  mapStyle: "amap://styles/whitesmoke", 
  viewMode: "2D",
});

1.2 Introduce the toolbar plugin, scale plugin, and eagle eye plugin at the same time

It is recommended to use asynchronous loading and introduce it where needed. Use the AMap.plugin method to introduce controls on demand and use the control functions after the plugin callback.

AMap.plugin(
  [
    "AMap.ToolBar",
    "AMap.Scale",
    "AMap.HawkEye",
    "AMap.Geolocation",
    "AMap.ControlBar",
  ],
  function () {
    //Add a toolbar control, which integrates a combination of functional buttons including zoom, pan, and location
    map.addControl(new AMap.ToolBar());

    //Add a scale control to display the scale of the map at the current level and latitude
    map.addControl(new AMap.Scale());

    //Add an eagle-eye control to display a thumbnail of the map in the lower right corner of the map
    map.addControl(new AMap.HawkEye({ isOpen: true }));

    //Add a positioning control to obtain and display the latitude and longitude position of the user's host
    map.addControl(new AMap.Geolocation());

    //Add a control compass control to control the rotation and tilt of the map
    map.addControl(new AMap.ControlBar());
  }
);

2、UI component library implements basic map controls

The UI component library of JS API provides some basic map controls through BasicControl. Currently includes:

• Zoom ControlBasicControl.Zoom；