【百度地图API】如何判断点击的是地图还是覆盖物?

简介: 原文:【百度地图API】如何判断点击的是地图还是覆盖物?摘要:很多API爱好者问我,为什么我点击的是marker,而map也会响应该事件呢?怎样才能判断,我点击的是标注,还是地图呢?下面一起来看看。   ------------------------------------------------------------ 先看看地图有哪些事件,查看官网类参考,翻到事件:   大家看到这里的参数了麽? 其实,在点击物体时,通过这些参数就能够判断所点击的物体是什么了。
原文: 【百度地图API】如何判断点击的是地图还是覆盖物?

摘要:很多API爱好者问我,为什么我点击的是marker,而map也会响应该事件呢?怎样才能判断,我点击的是标注,还是地图呢?下面一起来看看。

 

------------------------------------------------------------

先看看地图有哪些事件,查看官网类参考,翻到事件

 

大家看到这里的参数了麽?

其实,在点击物体时,通过这些参数就能够判断所点击的物体是什么了。

 

用marker举例:

先创建一个marker

//覆盖物Marker
    var pmk = new BMap.Point(116.249472,39.946583);
    var mk = new BMap.Marker(pmk);
    map.addOverlay(mk);

 

 

然后对地图添加点击事件,如果判断出来是覆盖物,就弹出相应的对话框。

    map.addEventListener("click",function(e){
        if(e.overlay){
            alert('你点击的是覆盖物:'+e.overlay.toString());   
        }else{
            alert('你点击的是地图');
        }
    });

 

 

 

 

添加一堆覆盖物,然后给每个覆盖物写点击事件。

 

 

比如我点击了多边形,就会弹出这个。

 

 

 

全部源代码:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>点击事件</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=v=1.3"></script>
</head>

<body>
  <!--百度地图容器-->
  <div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>
</body>
<script type="text/javascript">
    var map = new BMap.Map("dituContent");
    var point = new BMap.Point(116.331398,39.897445);
    map.centerAndZoom(point,12);
    map.enableScrollWheelZoom();

    map.addEventListener("click",function(e){
        if(e.overlay){
            alert('你点击的是覆盖物:'+e.overlay.toString());   
        }else{
            alert('你点击的是地图');
        }
    });

    //覆盖物Marker
    var pmk = new BMap.Point(116.249472,39.946583);
    var mk = new BMap.Marker(pmk);
    map.addOverlay(mk);

    //覆盖物Label
    var plb = new BMap.Point(116.408149,39.958087);
    var lb = new BMap.Label('我是覆盖物Label',{point:plb});
    map.addOverlay(lb);

    //覆盖物Polyline
    var pl = new BMap.Polyline([new BMap.Point(116.250047,39.919583),new BMap.Point(116.441494,39.919583)],{strokeWeight:10})
    map.addOverlay(pl);

    //覆盖物Polygon
    var pg = new BMap.Polygon([new BMap.Point(116.248323,39.893016),new BMap.Point(116.440344,39.893016),new BMap.Point(116.440344,39.811036),new BMap.Point(116.248323,39.811036)]);
    map.addOverlay(pg);

</script>
</html>
目录
相关文章
|
2月前
|
缓存 API 定位技术
使用Python调用百度地图API实现地址查询
使用Python调用百度地图API实现地址查询
114 0
|
2月前
|
自然语言处理 API 语音技术
Python加百度语音API实现文字转语音功能
Python加百度语音API实现文字转语音功能
59 0
|
4月前
|
JSON JavaScript 定位技术
Vue中使用echarts@4.x中国地图及AMap相关API的使用
Vue中使用echarts@4.x中国地图及AMap相关API的使用
174 0
Vue中使用echarts@4.x中国地图及AMap相关API的使用
|
5月前
|
SQL 存储 DataWorks
DataWorks中API、desc、数据地图,这3个怎么对起来?
DataWorks中API、desc、数据地图,这3个怎么对起来?
41 0
|
5月前
|
定位技术 API
百度地图API的使用教程以及案例(二)
百度地图API的使用教程以及案例
|
25天前
|
SQL API Python
Python DB API下规范下cursor对象常用接口
Python DB API下规范下cursor对象常用接口。
19 4
|
1天前
|
JSON 搜索推荐 数据挖掘
电商数据分析的利器:电商关键词搜索API接口(标题丨图片丨价格丨链接)
淘宝关键词搜索接口为电商领域的数据分析提供了丰富的数据源。通过有效利用这一接口,企业和研究人员可以更深入地洞察市场动态,优化营销策略,并提升用户体验。随着电商平台技术的不断进步,未来的API将更加智能和个性化,为电商行业带来更多的可能性。
|
8天前
|
存储 缓存 运维
DataWorks操作报错合集之DataWorks根据api,调用查询文件列表接口报错如何解决
DataWorks是阿里云提供的一站式大数据开发与治理平台,支持数据集成、数据开发、数据服务、数据质量管理、数据安全管理等全流程数据处理。在使用DataWorks过程中,可能会遇到各种操作报错。以下是一些常见的报错情况及其可能的原因和解决方法。
20 1
|
9天前
|
SQL 数据管理 API
数据管理DMS产品使用合集之阿里云DMS提供API接口来进行数据导出功能吗
阿里云数据管理DMS提供了全面的数据管理、数据库运维、数据安全、数据迁移与同步等功能,助力企业高效、安全地进行数据库管理和运维工作。以下是DMS产品使用合集的详细介绍。
|
9天前
|
运维 Serverless API
Serverless 应用引擎产品使用之在阿里函数计算中开启函数计算 API 接口如何解决
阿里云Serverless 应用引擎(SAE)提供了完整的微服务应用生命周期管理能力,包括应用部署、服务治理、开发运维、资源管理等功能,并通过扩展功能支持多环境管理、API Gateway、事件驱动等高级应用场景,帮助企业快速构建、部署、运维和扩展微服务架构,实现Serverless化的应用部署与运维模式。以下是对SAE产品使用合集的概述,包括应用管理、服务治理、开发运维、资源管理等方面。
108 6