Map and Overlay Events

In addition to the map display, when we operate on the map, we have to deal with various interactive events. This chapter introduces you to the map's event system, which includes the following: Event binding and unbinding, MapsEvent object, Map event, Coverage event

Event Binding & Unbinding

Before using the event, let me introduce the JS SDK event binding method. As with most class libraries, use the Map and Cover object on and off methods directly:

JavaScript

                    var clickHandle=function(point){
                        document.getElementById("lnglat").value = point.lngLat.toString();
                    }
                    map.on('click', clickHandle);
                    map.off('click', clickHandle);

MapsEvent

A MapsEvent object is returned when a mouse, touchscreen bound event callback for a Map, overlay, overlay object is called. This object contains information about the target of the trigger, the latitude and longitude of the trigger:

JavaScript

                    map.on('click', function(events) {
                      // The native event of the object that triggered the event
                      var original = events.originalEvent;

                      // The geographic coordinates of the trigger event, map.LngLat type
                      var lnglat = events.lngLat;

                      // pixel coordinates of the trigger event, map.Point type
                      var px = events.point;

                      // The object that triggered the event
                      var target = events.target;
                    });

Map Events

Map events are events that are triggered after the operation of the Map basemap. The specific categories are as follows:

Event Type	Event Name	Description
Map loading is complete	load	triggered after map tile loading is complete . At this point you can get the various states of the map (such as the center point, the current zoom level, etc.). At this point you can add components that depend on the map or call other logic that depends on the map (such as drawing graphics on the map, etc.).
Map zoom level changes	zoomstart、zoomend	Triggered when the map zoom level changes. The zoom level here can be generated by mouse or keyboard operation, or by setZoom, zoomIn, zoomOut trigger.
Map Center Point Move	mapmove、movestart、Moveend	When the map is panned, it is triggered when the map center point changes.The translation can be generated by mouse or keyboard operation, or by the interface that generates the map panning effect such as setCenter and panTo. Among them, if the panning interaction continues or during the animation, the mapmove event will continue to fire.
Map container size change	resize	Fires when the map container size changes. Usually the browser window is adjusted, or it is triggered when the DOM container size changes.
Mouse press and move, etc.	click、dblclick、mousemove、mouseover、mouseout、mouseup、mousedown、mousewheel、Contextmenu	is similar to a DOM event, triggered by a mouse click. The latitude and longitude position of the mouse can be obtained from the MapsEvent event returned by the callback function.
touch click	touchstart、touchmove、touchend	Trigger only when the mobile device touches the screen. The latitude and longitude position of the mouse can be obtained from the MapsEvent event returned by the callback function.

Overlay Event

Overlay refers to some common elements superimposed on the map basemap, such as point markers, icon markers, line type markers, polygon type markers, etc., all of which belong to the overlay. More overlay types can be referenced here. The coverage of the overlay is relatively simple, similar to the DOM event, as shown in the following table:

Event Type	Event Name	Description
Overlay drag	dragstart、drag、dragend	Drag the event triggered by the overlay, drag event will continue to trigger
Mouse press and move, etc.	click、dblclick、mousemove、mouseover、mouseout、mouseup、mousedown、mousewheel、Contextmenu	is similar to a DOM event, triggered by a mouse click. The latitude and longitude position of the mouse can be obtained from the MapsEvent event returned by the callback function.