Baidu map event processing-get the latitude and longitude of the map (Baidu map is easy to use), and map latitude and longitude

Baidu map event processing-get the latitude and longitude of the map (Baidu map is easy to use), and map latitude and longitude

Overview of MAP events

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, you can create an event that is propagated in the DOM by interacting with the mouse and keyboard. 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. programmers 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 e parameter contains the location point corresponding to the mouse.

For more information about map API object events, see the complete API reference documentation.

AddEventListener MethodThere are two parameters: the name of the monitored event and the function called when the event is triggered. In the following example,When a user clicks a map, a warning box is displayed..

var map = new BMap.Map ("container");
map.centerAndZoom (new BMap.Point (116.404, 39.915), 11);
map.addEventListener ("click", function () {
  alert ("You clicked on the map.");
});

 

 

You can also capture events by listening to events.After triggering. The following example shows the userDragLongitude and latitude information of the map center after 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 ("Map center point changed to:" + center.lng + "," + center.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.

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 use this to get the zoom level of the map.

var map = new BMap.Map ("container");
map.centerAndZoom (new BMap.Point (116.404, 39.915), 11);
map.addEventListener ("zoomend", function () {
  alert ("Map zoom to:" + this.getZoom () + "level");
});

 

Remove listener events

When you no longer want to listen for events, you canEvent listeningProceedRemove. Each API object providesRemoveEventListenerThis function is used to remove event listening functions.

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.

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);

 

 

Instance:

Click the longitude and latitude of the map to pop up.

<html>
<head>
     <meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
     <meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no" />
     <style type = "text / css">
         body, html {width: 100%; height: 100%; margin: 0; font-family: "Microsoft Yahei"; font-family: "Microsoft Yahei";}
         #allmap {width: 100%; height: 500px;}
         p {margin-left: 5px; font-size: 14px;}
     </ style>
     <script type = "text / javascript" src = "http://api.map.baidu.com/api?v=2.0&ak=your key"> </ script>
     <title> Map click event </ title>
</ head>
<body>
     <div id = "allmap"> </ div>
     <p> Add a click map listen event, and click the map to display the current latitude and longitude </ p>
</ body>
</ html>
<script type = "text / javascript">
     // Baidu map API function
     var map = new BMap.Map ("allmap");
     map.centerAndZoom (new BMap.Point (116.404, 39.915), 11);
     function showInfo (e) {
         alert (e.point.lng + "," + e.point.lat);
     }
     map.addEventListener ("click", showInfo);
</ script>

Thank you for reading this article!