百度地图JavaScriptAPI事件使用小贴士

来源：互联网发布：linux中如何创建用户编辑：程序博客网时间：2024/05/17 08:44

总结了三个百度地图JSAPI事件的常见问题，供各位JSAPI用户参考。
Q：同时给地图和覆盖物（如Marker）注册事件（如Click事件），如何只触发覆盖物的事件？

A：以同时给地图和Marker注册单击事件为例，不做任何处理时，核心代码如下：

[html] view plaincopy
<span style="font-size:12px;"><span style="color:#009900;">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);</span>  
}</span>  

以上代码，运行后单击Marker，会先后弹出两次alert，分别提示单击了Marker和Map；单击地图时，只会alert单击地图。

此时如果想单击Marker的时候，alert单击了Marker；单击地图时，alert单击了地图，则只要处理下ShowMapInfo即可。即：

[html] view plaincopy
<span style="font-family:Microsoft YaHei;font-size:12px;">function showMapInfo(e){  
if(e.overlay!=null) //判断覆盖物是否存在  
{  
return;  
}  
 alert("你单击的是Map吆~："+e.point.lng + ", " + e.point.lat);  
}</span>  

关于e的详情请参考百度地图API官网。
Q：如何注销掉百度地图匿名事件？

A: 一般来说，我们使用removeEventListener(event:String, handler:Function)方法注销掉之前注册的事件，但是该方法需要注册的时候指定handler函数名。对于注册的时候handler为匿名函数的情况，我们采用如下方法：

[html] view plaincopy
<span style="font-family:Microsoft YaHei;font-size:12px;">var markerShowInfo;//定义变量  
marker.addEventListener('click',markerShowInfo=function(e) //将匿名函数赋值给变量  
{  
alert(e.target.getPosition().lng);  
});  
marker.removeEventListener('click',markerShowInfo); //ok了吧？哈哈~</span>  

Q：如何通过事件返回参数e确定事件源的类型？

A: 当我们给多种覆盖物注册了同一事件，却又希望对不同类的覆盖物执行不同的操作时，就需要判断事件源类型。以下提供两种判断覆盖物类型的方式，即：

e.target.toString() == '[object Polygon]' //判断事件源是否是多边形

e.target instanceof BMap.Polygon

[html] view plaincopy
<span style="font-family:Microsoft YaHei;font-size:12px;"><span style="color:#009900;">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点喔~");  
 }  
  
}</span></span>  

三个示例的完整代码如下：

[html] view plaincopy
<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>  

0 0