总结了三个百度地图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>
欢迎大家留言、提问。
![大笑](http://static.blog.csdn.net/xheditor/xheditor_emot/default/laugh.gif)