百度地图,为了让事件使用的更方便,进行一层封装

详情可以看官方的文档 http://developer.baidu.com/map/jsdevelop-5.htm

主要的修改点:

1. 使用事件代理。

2. 重新封闭事件对象。

3. 事件对象的this指向map自己。

4. 附加了一些地图特有的属性,如地图位置point等。

说明: 对map对象和覆盖物都做了代理。

那么开发的时候,可能会遇到什么问题?

case: 事件穿透:

地图上有一个覆盖物, 当点击此覆盖物的时候,会招待执行对应操作,执行完之后,地图的普通poi也继续执行,也就是传说中的“事件穿透了”

很明显,这里需要阻止冒泡。想当然的,我们会使用如下的方法。

var map = new BMap.Map("allmap");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 16);
var circle = new BMap.Circle(point,500);
map.addOverlay(circle);
circle.onclick = function(e){
e.stopPropagation();
}

一招待发现有问题,stopPropagation方法找不到。

原来是bmap进行了封装,它将原始的事件放到一个domEvent中了。 这点与jquery是一样的处理,修复后的代码如下。

var map = new BMap.Map("allmap");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 16);
var circle = new BMap.Circle(point,500);
map.addOverlay(circle);
circle.onclick = function(e){
e.domEvent.stopPropagation();
}

OK了。

地图的源码实现如下

baidu.lang.Event.prototype.inherit = function (e) {
var me = this; this.domEvent = e = window.event || e; me.clientX = e.clientX || e.pageX;
me.clientY = e.clientY || e.pageY;
。。。。。

百度地图API的事件处理:覆盖物的如何阻止冒泡的更多相关文章

  1. 【百度地图API】如何给自定义覆盖物添加事件

    原文:[百度地图API]如何给自定义覆盖物添加事件 摘要: 给marker.lable.circle等Overlay添加事件很简单,直接addEventListener即可.那么,自定义覆盖物的事件应 ...

  2. 百度地图API如何给自定义覆盖物添加事件

    摘要: 给marker.lable.circle等Overlay添加事件很简单,直接addEventListener即可.那么,自定义覆盖物的事件应该如何添加呢?我们一起来看一看~ --------- ...

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

    原文:[百度地图API]如何判断点击的是地图还是覆盖物? 摘要:很多API爱好者问我,为什么我点击的是marker,而map也会响应该事件呢?怎样才能判断,我点击的是标注,还是地图呢?下面一起来看看. ...

  4. 百度地图api改变覆盖物背景实例及css颜色值简介

    在此鸣谢buptwusuopu的技术支持 在调用百度地图api的时候,为了改变覆盖物的颜色,如图中椭圆型的填充色.可以到百度api的库中查找方法http://developer.baidu.com/m ...

  5. 百度地图api的覆盖物样式与bootstrap样式冲突解决办法

    使用百度地图api 和 bootstrap ,发现标注样式出现了问题 label左侧 宽度变得非常窄 正常情况下应该是下面这样的: 原因是boostrap样式和百度地图样式冲突了. 解决办法: .ba ...

  6. Android端百度地图API使用详解

    百度地图API简介 百度地图移动版API(Android)是一套基于Android设备的应用程序接口,通过该接口,可以轻松的访问百度服务和数据,构建功能丰富.交互性强的地图应用程序. 百度地图移动版A ...

  7. 【转载】Android端百度地图API使用详解

    转载地址:http://www.cnblogs.com/rocomp/p/4994110.html 百度地图API简介 百度地图移动版API(Android)是一套基于Android设备的应用程序接口 ...

  8. 百度地图API简介

    百度地图API简介 在此申明不是我写的,用的是别人的,仅限自己学习 百度地图移动版API(Android)是一套基于Android设备的应用程序接口,通过该接口,可以轻松的访问百度服务和数据,构建功能 ...

  9. 百度地图API的使用

    ------------------自说自话----------------------------- 好奇怪,习惯性使用有道云笔记记录心得与知识后就很少用博客园来记录了. 但是后来想想,有些东西还是 ...

随机推荐

  1. linux网络编程系列-TCP/IP模型

    ### OSI:open system interconnection ### 开放系统互联网模型是由ISO国际标准化组织定义的网络分层模型,共七层 1. 物理层:物理定义了所有电子及物理设备的规范, ...

  2. c#之字符串函数

    1.常用的字符串函数 Compare 比较字符串的内容,考虑文化背景(场所),确定某些字符是否相等 int Compare(string str1,string str2) int Compare(s ...

  3. PCIe 调试

    ISE 生成PCIe核之后, 在ipcore_dir目录下会产生以下文件目录 目录下包含内容如下: The doc folder contains the PCIe Endpoint Block da ...

  4. swift中_的用法,忽略默认参数名。

    swift中默认参数名除了第一个之外,其他的默认是不忽略的,但是如果在参数的名字前面加上_,就可以忽略这个参数名了,虽然有些麻烦,但是这种定义也挺好,而且不想知道名字或者不想让别人知道名字的或者不用让 ...

  5. 预处理ifndef

    #ifdef 详解 这几个宏是为了进行条件编译.一般情况下,源程序中所有的行都参加编译.但是有时希望对其中一部分内容只在满足一定条件才进行编译,也就是对一部分内容指定编译的条件,这就是“条件编译”.有 ...

  6. k8s创建资源的两种方式

    命令 vs 配置文件 Kubernetes 支持两种方式创建资源: 1. 用 kubectl 命令直接创建 kubectl run nginx-deployment --image=nginx: -- ...

  7. hdu 1498(最小点覆盖集)

    50 years, 50 colors Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  8. python2和python3中的编码问题

    开始拾起python,准备使用python3, 造轮子的过程中遇到了编码的问题,又看了一下python3和python2相比变化的部分. 首先说个概念: unicode:在本文中表示用4byte表示的 ...

  9. UVALive 3882.And Then There Was One-约瑟夫问题(递推)

    And Then There Was One Time limit: 3.000 seconds Let’s play a stone removing game. Initially, n ston ...

  10. opencv获取像素的值

    opencv中获取图像像素的方法 方法一: IplImage *img = cvLoadImage("Lena.jpg", 0); CvScalar pixel; for (int ...