原文:【百度地图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. Lua面向对象设计（转）

    首先对于Lua语言,它没有打算被用来进行大型的程序设计,相反,Lua目标定于小型到中型的程序设计,通常是作为大型系统的一部分,所以它只提供了一套精简的元素,很多高级语言的概念都没有.这样Lua就成为了 ...

  2. gdb经常使用的命令

    在调试程序的时候,gdb是一柄利器,恰当的使用gdb能够解决掉程序的很多bug. gdb并不检查语法错误.那是gcc或者g++的事情,gdb干的是调试的事情. 说明: (1)gdb 程序名 [core ...

  3. linux shell 不同进制数据转换（二进制，八进制，十六进制，base64) （转）

    shell可以在不调用第3方命令,表示不同进制数据.这里总结以下表示方法.shell 脚本默认数值是由10 进制数处理,除非这个数字某种特殊的标记法或前缀开头. 才可以表示其它进制类型数值.如:以 0 ...

  4. js中推断对象详细类型

    大家可能知道js中推断对象类型能够用typeof来推断. 看以下的情况 <script> alert(typeof 1);//number alert(typeof "2&quo ...

  5. Effective C++ -- 继承和面向对象设计

    32.确保你的public继承了模is-a关系 public继承意味着is-a关系(里氏替换原则),一切适用于基类也适用于派生类. 矩形继承正方形问题: 可实施与矩形的操作无法实施与正方形 在编程领域 ...

  6. Canvas rontate(旋转) 使用误区

    context.setTransform(1,0,0,1,0,0);//重置转换为初始化状态 var angleInRadians = 45 * Math.PI / 180;var width = 4 ...

  7. Java 新特性(5) - Java EE 5 新特性

    Java EE 5 由 Java Community Process 通过 Java Specification Request 244 发布,这个 “总纲” JSR 指出了详细描述 Java EE ...

  8. mysql数据库的安装以及常见优化设置

    原文请详见:http://www.ucai.cn/blogdetail/7036?mid=1&f=5 能够在线执行查看效果哦! 本文依据优才网课程整理,面向web开发人员,内容以有用为主,专业 ...

  9. SQL入门学习5-函数、为此、CASE表达式

    6-1. 各种各样的函数 函数的种类 算数函数 字符串函数 日期函数 转换函数 聚合函数 1.1算术函数 数据类型:NUMERIC 是大多数DBMS都支持的一种数据类型. 通过NUMBERIC(全体位 ...

  10. Cocos2d-x3.0 DrawNode吸取

    DrawNode正如它的绘图形状的节点,相互作用可以使将来更加灵活. DrawNode* DrawLayer::shape() { auto shape = DrawNode::create(); s ...