HawkEye

AMap.HawkEye

The overview map control is used to display a thumbnail map, shown in the lower right corner of the map. It can move with the main map viewport changes or be configured to a fixed position to achieve an effect similar to the South China Sea inset map. Construct an overview map object

new AMap.HawkEye(options: HawkEyeOptions)

Tutorial

Parameter

opts (HawkEyeOptions): Overview map control parameters

Attribute	Type	Description
autoMove	boolean	Whether to move with the main map viewport changes, default value: true
showRectangle	boolean	Whether to show the viewport rectangle, default value: true
showButton	boolean	Whether to show the open/close button, default value: true
opened	boolean	Whether to expand by default
mapStyle	string	The custom style of the map to be displayed in the thumbnail, such as 'amap://styles/dark'. For more styles, please refer to the related tutorial
layers	array	The type of layer to display in the thumbnail, by default it shows a normal vector map, but it can be customized, such as: [new AMap.TileLayer.Satellite()] //Display satellite layer. For more layer types, please refer to the related tutorial
width	string	The width of the thumbnail, same as CSS, such as '200px'
height	string	The height of the thumbnail, same as CSS, such as '200px'
offset	[number, number]	The pixel distance of the thumbnail from the bottom right corner of the map, such as [2,2]
borderStyle	string	The border style of the thumbnail, same as CSS, such as "double solid solid double"
borderColor	string	The border color of the thumbnail, same as CSS, such as 'silver', supports using hexadecimal color codes, such as: '#00D3FC'
borderRadius	string	The border radius of the thumbnail, same as CSS, such as '5px'
borderWidth	string	The border width of the thumbnail, same as CSS, such as '2px'
buttonSize	string	The pixel size of the thumbnail close button, same as CSS, such as '12px'

Demo

//plugin introduce control
AMap.plugin(["AMap.HawkEye"], function () {
  //Add eagle eye control, display the map thumbnail in the lower right corner of the map
  map.addControl(new AMap.HawkEye({ isOpen: true }));
});

Method

show()

Set control to visible

Demo:

hawkEye.show();

hide()

Set control to hidden

Demo:

hawkEye.hide();

Event

Event Name	Description
show	Trigger this event when displayed
hide	This event is triggered when hidden

For event object property descriptions, go to:MapsEvent