Baidu map API-MAP events

Source: Internet
Author: User

Map event
JavaScript in the browser is "event-driven", which means that JavaScript responds to interaction by generating events and expects the program to "listen" to activities of interest. For example, in a browser, a user's mouse and keyboard interaction can create an event that is propagated in the DOM. Programs interested in certain events register JavaScript event listeners for these events and execute code when receiving these events.
Baidu map API has its own event model. We can listen to custom events of map API objects in a way similar to DOM events. Note that map API events are independent from standard DOM events.
Event listening
Most objects in Baidu map API contain the addEventListener method. You can use this method to listen to object events. For example, BMap. Map contains click, dblclick, and other events. In a specific environment, these events will be triggered, and the listening function will get the corresponding event parameter e. For example, when a user clicks a map, the parameter e will contain the geographic point corresponding to the mouse.
For more information about map API object events, see the complete API reference documentation.
The addEventListener method has two parameters: the name of the listener event and the function called when the event is triggered. In the following example, a warning box is displayed when a user clicks a map.
You can also capture the status after the event is triggered by listening to events.

// BMap is the namespace of Baidu map API, where all classes are var map = new BMap. map ("container"); // var point = createPoint (108.961636, 34.238584); // create a map point. centerAndZoom (point, 15); map. enableScrollWheelZoom (); map. addEventListener ("click", function () {alert ("click map ~ ") ;}); Map. addEventListener ("dragend", function () {alert ("map center changed to:" + "[" + map. getCenter (). lng + "," + map. getCenter (). lat + "]") ;});
Event parameters and this
In the standard DOM event model (DOM Level 2 Events), the listener function obtains an event object e, which can obtain information about the event in e. At the same time, this will point to the DOM element that triggers the event in the listener function. Similar to the event model of Baidu map API, the event object e is transferred in the event listening function. Each e parameter contains at least the event type and the object that triggers the event (target ). The API also ensures that this in the function points to the API object that triggers (and is also bound) events.
For example, you can use parameter e to obtain the longitude and latitude coordinates you click, or use this to obtain the scaled level of the map.
Map. addEventListener ("click", function (e) {alert ("[" + e. point. lng + "," + e. point. lat + "]") ;}); map. addEventListener ("zoomend", function () {alert ("map zoom to:" + this. getZoom () + "level ");});
Remove listener events
When you no longer want to listen for events, you can remove them. Each API object provides removeEventListener to remove the event listening function.
In the following example, when a user clicks a map for the first time, the event listening function is triggered and the event listening function is removed from the function. Therefore, subsequent clicking operations will not trigger the listening function.
<script type="text/javascript">var map = null;function load() {map = new BMap.Map("container");map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);map.addEventListener("click", showInfo);}function showInfo(e) {alert(e.point.lng + ", " + e.point.lat);map.removeEventListener("click", showInfo);}</script>
There is a small trap, and the code is as follows:
<script type="text/javascript">var map = null;function load() {map = new BMap.Map("container");map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);map.addEventListener("click", function(e){showInfo(e);});}function showInfo(e) {alert(e.point.lng + ", " + e.point.lat);alert(map);map.removeEventListener("click", showInfo);}</script>
The above Code cannot remove the listener. Why ???

--- Because AddEventListener binds an anonymous function to "click" when registering an event listener, while removeEventListener is the showInfo function.

Source: http://blog.csdn.net/ysjian_pingcx/article/details/22729629

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.