原文:【百度地图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>

【百度地图API】如何判断点击的是地图还是覆盖物？的更多相关文章

  1. 【百度地图API】如何制作一张魔兽地图！！——CS地图也可以，哈哈哈

    原文:[百度地图API]如何制作一张魔兽地图!!--CS地图也可以,哈哈哈 摘要: 你玩魔兽不?你知道如何做一张魔兽地图不?! 快来看此文吧! ---------------------------- ...

  2. 用百度地图API打造方便自己使用的手机地图

    有钱人咱就不说了,因为偶是个穷银--因为穷,所以去年买的Huawei C8650+到现在还在上岗,对于没有钱买好的配置的手机的童鞋来说,类似于百度,谷歌,高德等商家的地图在自己的机器上跑起来确实是有点 ...

  3. 百度地图API示例之根据城市名设置地图中心点

    代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" con ...

  4. 地图API使用文档-以腾讯地图为例

    目录 腾讯地图API 2 1.API概览... 2 1.1 WebService API(官网注明是beta版本,可能不稳定,慎用):... 2 1.2 URL API:... 2 1.3 静态图AP ...

  5. [WEB地图] 2017高德地图API WEB开发（key申请，地图搭建）简约教程

      前端时间因为公司需要研究 了一下百度的教程 然后写个简约的笔记记录一下自己学习的收获,只为了满足自己暂时的写作热情   高德地图WEB开发(key申请.api)简约教程 1.首先我们需要去“高德地 ...

  6. 百度地图Api进阶教程-点击生成和拖动标注4.html

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. 根据百度地图API得到坐标和地址并在地图上显示

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout ...

  8. 【高德地图API】VS2012或者VS2013添加高德地图v2.1.1版本SDK失败

    可能由于v2.1.1版本SDK可能是在Win8.1环境下编译[这里有许多的原因,系统升级,安装VS2013等等] 有童鞋在操作正常的情况下添加SDK失败,提示版本不兼容. 如下图: 编辑项目  *.c ...

  9. 百度地图API和高德地图API资料集锦

    [高德地图API]从零开始学高德JS API(五)路线规划——驾车|公交|步行   [高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自 ...

随机推荐

  1. Heritage from father

    Problem Description Famous Harry Potter,who seemd to be a normal and poor boy,is actually a wizard.E ...

  2. Hadoop入门进阶步步高（五）-搭建Hadoop集群

    五.搭建Hadoop集群 上面的步骤,确认了单机能够运行Hadoop的伪分布运行,真正的分布式运行无非也就是多几台slave机器而已,配置方面的有一点点差别,配置起来就很easy了. 1.准备三台se ...

  3. 采用ToolRunner执行Hadoop基本面分析程序

    为了简化执行作业的命令行.Hadoop它配备了一些辅助类.GenericOptionsParser它是一类.经常用来解释Hadoop命令行选项,并根据需要.至Configuration采取相应的对象设 ...

  4. csdn仍是&quot;待定&quot;对?

    正如标题,我的博客会审查,?我们见证.如此反复.考虑到该博客平台的变化.              看来,这次最终逃脱被"待审核",看来再也不用受这个困扰了,希望以后CSDN可以在 ...

  5. codeigniter 该脚本在运行300s超时退

    直接看代码, file:system/core/CodeIgniter.php /* 102  * -------------------------------------------------- ...

  6. 【面试】【Spring常见问题总结】【09】

    81.SimpleJdbcTemplate SimpleJdbcTemplate类也是基于JdbcTemplate类,但利用Java5+的可变參数列表和自己主动装箱和拆箱从而获取更简洁的代码. Sim ...

  7. 基于最简单的FFmpeg采样读取内存读写：内存玩家

    ===================================================== 基于最简单的FFmpeg样品系列读写内存列表: 最简单的基于FFmpeg的内存读写的样例:内 ...

  8. rabbitmq的java简单的实现

    1,安装rabbitmq.我的是ubuntu14.04,在官网上面下载最新的安装文件http://www.rabbitmq.com/install-debian.html 2.安装完之后  启动rab ...

  9. mongodb.conf

    # mongodb.conf # Where to store the data. dbpath=/var/lib/mongodb #where to log logpath=/var/log/mon ...

  10. Redis集群方案及实现

    在作出Redis群集解决方案,他跑了小半个.行表现得非常稳定在几乎相同的经历与大家分享,我写在前面的文章数据在线服务的一些探索经验,能够做为背景阅读 应用 我们的Redis集群主要承担了下面服务:1. ...