event


Map event overview

JavaScript in the browser is "event-driven," which means that JavaScript responds to interactions by generating events and expects the program to "listen" for activities of interest. For example, in a browser, the user's mouse and keyboard interactions can create events that propagate within the DOM. Programs that are interested in certain events register JavaScript event listeners for those events and execute code when they receive those events.

Baidu Map API has its own event model. Programmers can listen to custom events of map API objects. The usage method is similar to DOM events. But please note that Map API events are independent and different from standard DOM events.

Event monitoring

Most objects in the Baidu Map API contain the addEventListener method, and you can use this method to listen to object events. For example, BMap.Map contains click, dblclick and other events. These events will be triggered under specific circumstances, and the listening function will obtain the corresponding event parameter e. For example, when the user clicks on the map, the e parameter will contain the geographical location point corresponding to the mouse.

For events on the map API object, please refer to the complete API reference documentation.

The addEventListener method has two parameters: the name of the event to be listened to and the function to be called when the event is triggered. In the example below, an alert box pops up every time the user clicks on the map. 

var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);    
map.addEventListener("click", function(){    
 alert("您点击了地图。");    
});
By listening to events, you can also capture the status after the event is triggered. The following example shows the latitude and longitude information of the map center after the user drags the map. 

var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);    
map.addEventListener("dragend", function(){    
 var center = map.getCenter();    
 alert("地图中心点变更为：" + center.lng + ", " + center.lat);    
});

Event parameters and this

In the standard DOM event model (DOM Level 2 Events), the listening function will get an event object e, and information about the event can be obtained in e Information. At the same time, in the listening function, this will point to the DOM element that triggered the event. The event model of Baidu Map API is similar to this. The event object e is passed in the event listening function. Each e parameter contains at least the event type (type) and the object that triggered the event (target). The API also ensures that this within the function points to the API object that triggered (and was also bound to) the event.

For example, get the latitude and longitude coordinates of the click through parameter e. 

var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);    
map.addEventListener("click", function(e){    
 alert(e.point.lng + ", " + e.point.lat);    
});

Or get the zoomed level of the map through this. 

var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);    
map.addEventListener("zoomend", function(){    
 alert("地图缩放至：" + this.getZoom() + "级");    
});

Remove listening events

When you no longer want to listen to events, you can move the event listening remove. Each API object provides removeEventListener to remove event listening functions.

In the following example, the user's first click on the map will trigger the event listening function. The event listening function is removed inside the function, so subsequent click operations will not trigger the listening function. 

var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);    
function showInfo(e){    
 alert(e.point.lng + ", " + e.point.lat);    
 map.removeEventListener("click", showInfo);    
}    
map.addEventListener("click", showInfo);
←
→