Map and Overlay Events

In addition to map display, when we operate on the map, we inevitably need to handle various interactive events. This article introduces the event system of the map, which includes the following contents:

Event Binding and Unbinding
MapsEvent Object
Map Events
Overlay events

1、Event binding and unbinding

Before using events, first introduce the JS API event binding method. Before using events, first introduce the JS API event binding method.

Similar to most libraries, directly use the on and off methods of the Map and overlay objects:

var map = new AMap.Map("container");
var clickHandler = function(e) {
  alert('You are[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]The location clicked on the map!');
};

//Bind event
map.on('click', clickHandler);
//Unbind event
map.off('click', clickHandler);

View the reference manual

2、MapsEvent object

When binding mouse and touch events to Map, overlays, and overlay objects, a MapsEvent object will be returned. This object contains information such as the triggered object target and the latitude and longitude of the trigger:

map.on("click", function (ev) {
  //The object that triggered the event
  var target = ev.target;

  //Geographical coordinates of the triggering event, AMap.LngLat type
  var lnglat = ev.lnglat;

  //Pixel coordinates of the triggering event, AMap.Pixel type
  var pixel = ev.pixel;

  //Trigger event type
  var type = ev.type;
});

View the reference manual

3、Map Event

Map events are triggered after operations on the Map base layer, and specific categories are shown in the table below:

	Event Type	Event Name	Description
Triggered when the internal state of the map changes	Map loaded	complete	Triggered after the map tiles are loaded. At this point, various states of the map (such as the center point, current zoom level, etc.) can be retrieved. At this point, components dependent on the map can be added or other map-dependent logic (such as drawing shapes on the map) can be invoked.
	Map zoom level changed	zoomstart、 zoomend	Triggered when the map's zoom level changes. The zoom level can be generated by mouse or keyboard operations, or triggered by setZoom, zoomIn, zoomOut.
	Map center point moved	mapmove、 movestart、 moveend	Triggered when the map is panned, i.e., when the center point of the map changes. Here, panning can be generated through mouse and keyboard operations, or triggered through interfaces that produce map panning effects such as setCenter, panTo, panBy. Among them, if the panning interaction continues or during the animation, the mapmove event will continue to be triggered.
	Map container size changed	resize	Triggered after the map container size changes. This is usually triggered when the browser window is resized or the DOM container size changes. Note that this event will only be correctly triggered when Map's resizeEnable is enabled.
Triggered when interacting with the mouse, touch screen, etc	Mouse press and move, etc	click、 dblclick、 mousemove、 mouseover、 mouseout、 mouseup、 mousedown、 mousewheel、 rightclick	Similar to DOM events, it is triggered after a mouse click. In the MapsEvent returned by the callback function, you can get the latitude and longitude position of the mouse.
	Touch screen click	touchstart、 touchmove、 touchend	Triggered only when touching the screen on mobile devices. In the MapsEvent returned by the callback function, you can get the latitude and longitude position of the mouse.

Please refer to the reference manual

4、Overlay events

Overlays refer to some common elements overlaid on the base map, such as point markers, icon markers, text markers, line markers, polygon markers, etc. More types of overlays can be referenced here. The events related to overlays are relatively simple and similar to DOM events, as detailed in the following table:

	Event Type	Event Name	Description
Triggered when the state of the overlay changes	Marker and Text class object movement	moving、 moveend、 movealong	The event is triggered only when the point marker Marker and the text marker Text are moved.
	Vector graphics display and hide	hide、 show	It is triggered after the vector graphics call the show() and hide() methods.
	ContextMenu class object opening and closing	open、 close	It is triggered after the ContextMenu class object calls the open() and close() methods.
Triggered when interacting with the mouse, touch screen, etc	Mouse press and move, etc	click、 dblclick、 mousemove、 mouseover、 mouseout、 mouseup、 mousedown、 mousewheel、 rightclick	Similar to DOM events, it is triggered after a mouse click. The callback function returns a MapsEvent where the latitude and longitude of the mouse can be obtained. Refer to the example.
	Touch screen click	touchstart、 touchmove、 touchend	Only triggered when the mobile device is touched. The latitude and longitude of the mouse position can be obtained in the MapsEvent returned by the callback function. Refer to the example.

Please refer to the reference manual