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

详情可以看官方的文档 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. jquery学习总计

    1,jquery的基础语法 $(selector).action(); 选择器(selector)查询和查找html元素,action()执行对函数的操作. 2.选择器 id,类,类型,属性,属性值等 ...

  2. Spring MVC框架下 将数据库内容前台页面显示完整版【获取数据库人员参与的事件列表】

    1.书写jsp页面包括要显示的内容[people.jsp] <!-- 此处包括三个方面内容: 1.包含 文本输入框 查询按钮  查询结果显示位置 (paging) 2.包括对按钮(button) ...

  3. shell之流程控制

    一.if语句.while.for循环各种小例题 1.用户验证 [root@bogon ~]# cat buer.sh #!/bin/bash #user='buer' #password='1234. ...

  4. html初探

    HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏 ...

  5. bzoj4602 [Sdoi2016]齿轮

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=4602 [题解] 对于每组齿轮(u, v)连边,权值为y/x(反向边x/y) 那么直接dfs计 ...

  6. codechef T6 Pishty and tree dfs序+线段树

    PSHTTR: Pishty 和城堡题目描述 Pishty 是生活在胡斯特市的一个小男孩.胡斯特是胡克兰境内的一个古城,以其中世纪风格 的古堡和非常聪明的熊闻名全国. 胡斯特的镇城之宝是就是这么一座古 ...

  7. [bzoj2763][JLOI2011]飞行路线——分层图最短路

    水题.不多说什么. #include <bits/stdc++.h> using namespace std; const int maxn = 10010; const int maxk ...

  8. (转载)常用的Python库

    http://forum.ubuntu.com.cn/viewtopic.php?f=63&t=249573&p=2640959 Tkinter ---- Python默认的图形界面接 ...

  9. Linux core dump file详解

    Linux core dump file详解 http://www.cnblogs.com/langqi250/archive/2013/03/05/2944931.html

  10. poj 1066(枚举+线段相交)

    Treasure Hunt Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 6328   Accepted: 2627 Des ...