百度地图之事件处理--获取所在的经纬度（百度地图简单使用）_html/css

地图事件概述　

　　浏览器中的JavaScript是“事件驱动的”，这表示JavaScript通过生成事件来响应交互，并期望程序能够“监听”感兴趣的活动。例如，在浏览器中，用户的鼠标和键盘交互可以创建在DOM内传播的事件。对某些事件感兴趣的程序会为这些事件注册JavaScript事件监听器，并在接收这些事件时执行代码。

　　百度地图API拥有一个自己的事件模型，程序员可监听地图API对象的自定义事件，使用方法和DOM事件类似。但请注意，地图API事件是独立的，与标准DOM事件不同。

事件监听

　　百度地图API中的大部分对象都含有addEventListener方法，您可以通过该方法来监听对象事件。例如，BMap.Map包含 click、dblclick等事件。在特定环境下这些事件会被触发，同时监听函数会得到相应的事件参数e，比如当用户点击地图时，e参数会包含鼠标所对应的地理位置point。

有关地图API对象的事件，请参考完整的API参考文档。

　　addEventListener方法有两个参数：监听的事件名称和事件触发时调用的函数。在下面示例中，每当用户点击地图时，会弹出一个警告框。

var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); map.addEventListener("click", function(){ alert("您点击了地图。"); });

Copy after login

　　通过监听事件还可以捕获事件触发后的状态。下面示例显示用户拖动地图后地图中心的经纬度信息。

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

Copy after login

事件参数和this

　　在标准的DOM事件模型中（DOM Level 2 Events），监听函数会得到一个事件对象e，在e中可以获取有关该事件的信息。同时在监听函数中this会指向触发该事件的DOM元素。百度地图API的事件模型与此类似，在事件监听函数中传递事件对象e，每个e参数至少包含事件类型（type）和触发该事件的对象（target）。 API还保证函数内的this指向触发（同时也是绑定）事件的API对象。

　　例如，通过参数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); });

Copy after login

　　或者通过this得到地图缩放后的级别。

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

Copy after login

移除监听事件

　　当您不再希望监听事件时，可以将事件监听进行移除。每个API对象提供了removeEventListener用来移除事件监听函数。

　　下面示例中，用户第一次点击地图会触发事件监听函数，在函数内部对事件监听进行了移除，因此后续的点击操作则不会触发监听函数。

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

Copy after login

实例：

　　点击地图弹出所在的经纬度

地图单击事件

添加点击地图监听事件，点击地图后显示当前经纬度

Copy after login

　　感谢您的阅读！