百度地图JavaScriptAPI事件使用小贴士
总结了三个百度地图JSAPI事件的常见问题，供各位JSAPI用户参考。
Q： 同时给地图和覆盖物（如Marker）注册事件（如Click事件），如何只触发覆盖物的事件？
Q：如何注销掉百度地图匿名事件？
欢迎大家留言、提问。
Q： 同时给地图和覆盖物（如Marker）注册事件（如Click事件），如何只触发覆盖物的事件？
A：以同时给地图和Marker注册单击事件为例，不做任何处理时，核心代码如下：
marker.addEventListener("click", showInfo);//给marker注册单击事件 map.addEventListener("click", showMapInfo);//给地图注册单击事件 function showInfo(e){ alert("你单击的是Marker吆~："+e.point.lng + ", " + e.point.lat); } function showMapInfo(e){ alert("你单击的是Map吆~："+e.point.lng + ", " + e.point.lat);
}
以上代码，运行后单击Marker，会先后弹出两次alert，分别提示单击了Marker和Map；单击地图时，只会alert单击地图。
此时如果想单击Marker的时候，alert单击了Marker；单击地图时，alert单击了地图，则只要处理下ShowMapInfo即可。即：
function showMapInfo(e){
if(e.overlay!=null) //判断覆盖物是否存在
{
return;
}
alert("你单击的是Map吆~："+e.point.lng + ", " + e.point.lat);
}
关于e的详情请参考百度地图API官网。Q：如何注销掉百度地图匿名事件？
A: 一般来说，我们使用removeEventListener(event:String, handler:Function)方法注销掉之前注册的事件，但是该方法需要注册的时候指定handler函数名。对于注册的时候handler为匿名函数的情况，我们采用如下方法：
var markerShowInfo;//定义变量
marker.addEventListener('click',markerShowInfo=function(e) //将匿名函数赋值给变量
{
alert(e.target.getPosition().lng);
});
marker.removeEventListener('click',markerShowInfo); //ok了吧？哈哈~
Q：如何通过事件返回参数e确定事件源的类型？
A: 当我们给多种覆盖物注册了同一事件，却又希望对不同类的覆盖物执行不同的操作时，就需要判断事件源类型。以下提供两种判断覆盖物类型的方式，即：
e.target.toString() == '[object Polygon]' //判断事件源是否是多边形
e.target instanceof BMap.Polygon
polygon.addEventListener("click", showOverlayInfo); marker.addEventListener("click", showOverlayInfo);//作为参考 function showOverlayInfo(e){ if (e.target.toString() == '[object Polygon]') { alert("你单击的是多边形"); } else if(e.target instanceof BMap.Marker) { alert("你单击的是Marker点喔~"); } }
三个示例的完整代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
#r-result{height:100%;width:20%;float:left;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
<title>点击获取当前经纬度</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
var marker=new BMap.Marker(new BMap.Point(116.404, 39.915));
map.addOverlay(marker);
/* 第一个问题 开始*/
marker.addEventListener("click", showInfo);
map.addEventListener("click", showMapInfo);
function showInfo(e){
alert("你单击的是Marker吆~："+e.point.lng + ", " + e.point.lat);
}
function showMapInfo(e){
if(e.overlay!=null)
{
return;
}
alert("你单击的是Map吆~："+e.point.lng + ", " + e.point.lat);
}
/* 第一个问题 结束*/
/* 第二个问题 开始*/
var markerShowInfo;
marker.addEventListener('click',markerShowInfo=function(e)
{
alert(e.target.getPosition().lng);
});
marker.removeEventListener('click',markerShowInfo);
/* 第二个问题 结束*/
/* 第三个问题 开始*/
var polygon=new BMap.Polygon([
new BMap.Point(116.256515,39.995242),
new BMap.Point(116.502579,39.951893),
new BMap.Point(116.534775,39.998338)]);
map.addOverlay(polygon);
polygon.addEventListener("click", showOverlayInfo);
marker.addEventListener("click", showOverlayInfo);//作为参考
function showOverlayInfo(e){
if (e.target.toString() == '[object Polygon]')
{
alert("你单击的是多边形");
}
else if(e.target instanceof BMap.Marker)
{
alert("你单击的是Marker点喔~");
}
}
/* 第三个问题 结束*/
</script>
欢迎大家留言、提问。