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

最新推荐文章于 2023-04-19 11:40:43 发布

BaiduLBS

最新推荐文章于 2023-04-19 11:40:43 发布

阅读量1.8w

点赞数 3

分类专栏： JavaScript API

本文链接：https://blog.csdn.net/BaiduLBS/article/details/8762764

版权

JavaScript API 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

总结了三个百度地图JSAPI事件的常见问题，供各位JSAPI用户参考。
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>

欢迎大家留言、提问。

BaiduLBS

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
6
评论
百度地图JavaScriptAPI事件使用小贴士

总结了三个百度地图JSAPI事件的常见问题，供各位JSAPI用户参考。Q：同时给地图和覆盖物（如Marker）注册事件（如Click事件），如何只触发覆盖物的事件？A：以同时给地图和Marker注册单击事件为例，不做任何处理时，核心代码如下：marker.addEventListener("click", showInfo);//给marker注册单击事件map.add
复制链接

扫一扫