【百度地图事件监听】

时间 2019-11-20

标签百度地图事件监听繁體版

原文原文链接

在运用百度地图API时，须要监听地图的点击事件。发现一个问题。javascript

百度地图关于事件的描述：css

地图事件概述

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

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

事件监听

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

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

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

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

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

var map=newBMap.Map("container");
map.centerAndZoom(newBMap.Point(116.404,39.915),11);
map.addEventListener("dragend", function(){
var center =map.getCenter();
alert("地图中心点变动为："+ center.lng +", "+ center.lat);
});

事件参数和this

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

例如，经过参数e获得点击的经纬度坐标。ui

var map=newBMap.Map("container");
map.centerAndZoom(newBMap.Point(116.404,39.915),11);
map.addEventListener("click", function(e){
alert(e.point.lng +", "+ e.point.lat);
});

或者经过this获得地图缩放后的级别。

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

移除监听事件

当您再也不但愿监听事件时，能够将事件监听进行移除。每一个API对象提供了removeEventListener用来移除事件监听函数。

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

var map=newBMap.Map("container");
map.centerAndZoom(newBMap.Point(116.404,39.915),11);
function showInfo(e){
alert(e.point.lng +", "+ e.point.lat);
map.removeEventListener("click", showInfo);
}
map.addEventListener("click", showInfo);

可是我发现当触发addEventListener两次时， removeEventListener就无效了。:

<!DOCTYPE html>
<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">
html,body {height:100%;}
#allmap {width:100%;height:50%;overflow: hidden;margin:0;font-family:"微软雅黑";}
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script src="http://api.map.baidu.com/api?v=2.0&ak=1ixirBnjW51i4NoOdEKGP3Xk" type="text/javascript"></script>
<title>给覆盖物添加右键菜单</title>
</head>
<body>
<div id="allmap"></div>
<input type="button" value="点击绘制圆"class="add">
<input type="button" value="取消绘制圆"class="remove">
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map =newBMap.Map("allmap");
var point =newBMap.Point(116.404,39.915);
map.centerAndZoom(point,15);
radiusNum =500;
function showInfo(e){
//alert(e.point.lng + ", " + e.point.lat);
console.log('showInfo');
map.clearOverlays();
circlePoint =newBMap.Point(e.point.lng, e.point.lat);// 建立点坐标
var circle =newBMap.Circle(circlePoint, radiusNum,{
strokeColor:"blue",
strokeWeight:2,
strokeOpacity:0.5
});//建立圆
map.addOverlay(circle);//增长圆
}
function addClick(){
console.log("addClick");
map.addEventListener("click",showInfo);
}
function removeClick(){
console.log("removeClick");
map.removeEventListener("click",showInfo);
}
$(".add").on('click',addClick);
$(".remove").on('click',removeClick);
</script>

Q：如何解决这个问题呢？

A：目前想到的只有在showInfo函数中末尾处添加

map.removeEventListener("click",showInfo);

可是这样就只能添加圆一次。