Baidu map event processing--getting the latitude and longitude (simple use of Baidu map)_html/css_WEB-ITnose

Map events 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 interested Activity. 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 Listening

Most objects in the Baidu Map API contain the addEventListener method, through which you can 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 get 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 Map API objects, 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, whenever the user clicks on the map, an alert box will pop up.

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 of after the event is triggered. The following example shows the latitude and longitude information of the center of the map 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, in which information about the event can be obtained. 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 the 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 for events, you can Event listener is removed. Each API object provides removeEventListener to remove event listening functions.

In the example below, 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);

Example:

Click the latitude and longitude where the map pops 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:"微软雅黑";font-family:"微软雅黑";}        #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=您的密钥"></script>    <title>地图单击事件</title></head><body>    <div id="allmap"></div>    <p>添加点击地图监听事件，点击地图后显示当前经纬度</p></body></html><script type="text/javascript">    // 百度地图API功能    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!