Overview of Map Events
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, a user's mouse and keyboard interaction can create events that propagate within the DOM. Programs that are interested in certain events register JavaScript event listeners for these events and execute code when they receive these events.
Baidu Maps API has its own event model, and programmers can listen to custom events for map API objects, using methods similar to DOM events. Note, however, that map API events are independent and differ from standard DOM events.
Event MonitoringMost of the objects in the Baidu map API contain the AddEventListener method, which you can use to listen for object events. For example, Bmap.map contains events such as Click, DblClick, and so on. These events are triggered in a given environment, and the listener function gets the corresponding event argument e, for example, when the user clicks on the map, the e parameter contains the location point of the mouse.
For events on Map API objects, refer to the full API reference documentation.
The AddEventListener method has two parameters: the listener's event name and the function that was called when the event was triggered. In the example below, a warning box pops up each time the user taps the map .
var New Bmap.map ("container"); Map.centerandzoom (new bmap.point (116.404, 39.915), one by one); Map.addeventlistener (function() { alert ("You clicked on the map. "); });You can also capture the state after the event is triggered by listening for events. The following example shows the latitude and longitude information for the map center after the user drags the map.
var New Bmap.map ("container"); Map.centerandzoom (new bmap.point (116.404, 39.915), one by one); Map.addeventlistener (function() { var center = Map.getcenter (); Alert ("Map Center point changed to:" + center.lng + "," + Center.lat); });In the standard DOM event model (DOM Level 2 events), the listener function obtains an event object E, in which information about the event can be obtained. Also in the listener function, this points to the DOM element that triggered the event. The event model of the Baidu Map API is similar, passing event object E in the event listener function, each e parameter containing at least the event type (type) and the object that triggered the event (target). The API also guarantees that this within the function points to the API object that triggers (and is also bound) the event.
For example, the latitude and longitude coordinates of a click are obtained by the parameter E.
var New Bmap.map ("container"); Map.centerandzoom (new bmap.point (116.404, 39.915), one by one); Map.addeventlistener (function(e) { + "," + E.point.lat); });Or you get the level of the map after zooming through this.
var New Bmap.map ("container"); Map.centerandzoom (new bmap.point (116.404, 39.915), one by one); Map.addeventlistener (function() { alert (this. Getzoom () + "level"); }); To remove a listener event
When you no longer want to listen for events, you can remove the event listener . Each API object provides RemoveEventListener to remove the event listener function.
In the following example, the first time a user clicks on a map triggers an event listener, which removes the event listener within the function, so subsequent clicks do not trigger the listener function.
var New Bmap.map ("container"); Map.centerandzoom (new bmap.point (116.404, 39.915), one by one); function Showinfo (e) { + "," + E.point.lat); Map.removeeventlistener ("click", Showinfo); } Map.addeventlistener ("click", Showinfo);Instance:
Click the latitude and longitude where the map pops up
<HTML><Head> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /> <Metaname= "Viewport"content= "initial-scale=1.0, User-scalable=no" /> <styletype= "Text/css">Body, HTML{width:100%;Height:100%;margin:0;font-family:"Microsoft Jas Black";font-family:"Microsoft Jas Black";}#allmap{width:100%;Height:500px;}P{Margin-left:5px;font-size:14px;} </style> <Scripttype= "Text/javascript"src= "http://api.map.baidu.com/api?v=2.0&ak= your Key"></Script> <title>Map Click event</title></Head><Body> <DivID= "Allmap"></Div> <P>Add click Map to listen to events, click on the map to display the current latitude and longitude</P></Body></HTML><Scripttype= "Text/javascript"> //Baidu Map API features varMap= NewBmap.map ("Allmap"); Map.centerandzoom (NewBmap.point (116.404, 39.915), One); functionShowinfo (e) {alert (e.point.lng+ ", " +E.point.lat); } map.addeventlistener ("Click", showinfo);</Script>
Thank you for reading!
Baidu Map Event processing-Get the latitude and longitude (Baidu map simple use)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
