InfoWindow

AMap.InfoWindow

Info window, the map can only display one info window at a time. It is recommended to set the size of the info window through style display. Construct an info window object and set the properties of the info window object through InfoOptions

new AMap.InfoWindow(opts: InfoOptions)

Tutorial

Parameter

options (InfoOptions): Info window parameters

Attribute	Type	Description
isCustom	boolean	Whether to customize the window. When set to true, the frame and content of the info window are completely added according to the value set by content (default value: false, i.e., displaying the content in the system default info window frame)
autoMove	boolean	Whether to automatically adjust the window into the view (when the info window is out of the view range, this property sets whether to automatically pan the map to make the info window fully visible). Default value: true
avoid	Array<number>	When autoMove is true, the avoidance width of top, right, bottom, and left after automatically panning into the view. Default value: [20, 20, 20, 20]
closeWhenClickMap	boolean	Control whether to close the info window after clicking on the map. Default is false, meaning the info window will not close after clicking on the map. Default value: false
content	String \| HTMLElement	Display content, which can be a user-defined DOM node or an HTML fragment of a DOM node.
size	Size	Info window size (this property is invalid when isCustom is true)
anchor	string	Info window anchor. Default value: 'bottom-center'. Optional values: 'top-left'\|'top-center'\|'top-right'\|'middle-left'\|'center'\|'middle-right'\|'bottom-left'\|'bottom-center'\|'bottom-right'
offset	Vector \| Pixel	The offset of the info window display position. The default reference point is the bottom center of the info window. If the anchor is set, the anchor position set by the anchor is used. Default value: [0, 0]
position	Vector \| LngLat	The base point position of the information window display, supports passing in a longitude and latitude object or a one-dimensional array composed of longitude and latitude, such as: AMap.LngLat(77.19, 28.59) or [77.19, 28.59]
extData	any	User-defined attributes, supporting any data type of JavaScript API, such as id, etc. Custom data can be saved on this attribute for convenient subsequent operations

Demo

var infoWindow = new AMap.InfoWindow({
  content: "Information window",
  anchor: "bottom-center",
});
// Open the information window on the map
infoWindow.open(map, map.getCenter());

Method

open(map, position, height)

Open the information window

Parameter:

map (Map) Map object to be displayed in the info window

position (Vector2) Base position of the info window display, optional. If omitted, the base position is displayed according to the position attribute. If set, it will override the position set by the position attribute

height (number) Height of the info window, optional

Demo:

infoWindow.open(map, [100.491422, 13.749313]);

close()

Close info window

Demo:

infoWindow.close();

getIsOpen()

Get whether the info window is open

return value: (boolean) Boolean value, whether it is in the open state

Demo:

infoWindow.getIsOpen();

setSize(size)

Set information window size (effective when isCustom is false)

Parameter: size (Size | Vector2) Information window size

Demo:

infoWindow.setSize([10, 10]);

getSize()

Get information window size

return value: (Vector2) Info window size

Demo:

infoWindow.getSize();

setContent(content)

Set the display content of the info window

Parameter: content (HTMLElement | string) Display content, the value is a user-defined DOM node or HTML fragment of a DOM node

Demo:

var content = [
  "<div class='info'>This is a custom window",
  "So you can customize both the content and the style",
  "<img src='https://webapi.amap.com/images/sharp.png'></div>",
];
infoWindow.setContent(content);

Set the style

.info {
  background-color: #fff;
  text-align: center;
  padding: 10px;
  position: relative;
  border: 1px solid #b9b9b9;
}

.info img {
  width: 30px;
  height: 23px;
  position: absolute;
  left: calc(50% - 15px);
  bottom: -23px;
}

getContent()

Get the display content of the info window

return value: (HTMLElement | string) Display content of the info window

Demo:

infoWindow.getContent();

setAnchor(anchor)

Parameter: anchor (string) Anchor position, e.g., 'top-left'

Demo:

infoWindow.setAnchor('top-left');

getAnchor()

Get information window anchor orientation

return value: (string) Window anchor orientation

Demo:

infoWindow.getAnchor();

getExtData()

Get user-defined attributes

return value: (any | undefined) The value set by the extData attribute, returns null if not set

Demo:

infoWindow.getExtData();

setExtData(extData)

Set user-defined attributes

Parameter: extData (any) User-defined data, supporting any data type of JavaScript API

Demo:

infoWindow.setExtData({id:1});

Event

Event Name	Description
open	Event triggered after the information window is opened
close	Event triggered after the information window is closed

For event object property descriptions, go to:MapsEvent