百度地图API的事件处理:覆盖物的如何阻止冒泡
百度地图,为了让事件使用的更方便,进行一层封装
详情可以看官方的文档 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的事件处理:覆盖物的如何阻止冒泡的更多相关文章
- 【百度地图API】如何给自定义覆盖物添加事件
原文:[百度地图API]如何给自定义覆盖物添加事件 摘要: 给marker.lable.circle等Overlay添加事件很简单,直接addEventListener即可.那么,自定义覆盖物的事件应 ...
- 百度地图API如何给自定义覆盖物添加事件
摘要: 给marker.lable.circle等Overlay添加事件很简单,直接addEventListener即可.那么,自定义覆盖物的事件应该如何添加呢?我们一起来看一看~ --------- ...
- 【百度地图API】如何判断点击的是地图还是覆盖物?
原文:[百度地图API]如何判断点击的是地图还是覆盖物? 摘要:很多API爱好者问我,为什么我点击的是marker,而map也会响应该事件呢?怎样才能判断,我点击的是标注,还是地图呢?下面一起来看看. ...
- 百度地图api改变覆盖物背景实例及css颜色值简介
在此鸣谢buptwusuopu的技术支持 在调用百度地图api的时候,为了改变覆盖物的颜色,如图中椭圆型的填充色.可以到百度api的库中查找方法http://developer.baidu.com/m ...
- 百度地图api的覆盖物样式与bootstrap样式冲突解决办法
使用百度地图api 和 bootstrap ,发现标注样式出现了问题 label左侧 宽度变得非常窄 正常情况下应该是下面这样的: 原因是boostrap样式和百度地图样式冲突了. 解决办法: .ba ...
- Android端百度地图API使用详解
百度地图API简介 百度地图移动版API(Android)是一套基于Android设备的应用程序接口,通过该接口,可以轻松的访问百度服务和数据,构建功能丰富.交互性强的地图应用程序. 百度地图移动版A ...
- 【转载】Android端百度地图API使用详解
转载地址:http://www.cnblogs.com/rocomp/p/4994110.html 百度地图API简介 百度地图移动版API(Android)是一套基于Android设备的应用程序接口 ...
- 百度地图API简介
百度地图API简介 在此申明不是我写的,用的是别人的,仅限自己学习 百度地图移动版API(Android)是一套基于Android设备的应用程序接口,通过该接口,可以轻松的访问百度服务和数据,构建功能 ...
- 百度地图API的使用
------------------自说自话----------------------------- 好奇怪,习惯性使用有道云笔记记录心得与知识后就很少用博客园来记录了. 但是后来想想,有些东西还是 ...
随机推荐
- DOM操作的一个小坑
最近在苦读<JavaScript高级程序教程>,真不愧是前端圣经,学到了很多东西. nodeList.NameNodeMap.HTMLCollection这三个集合是动态的!每当文档发生变 ...
- 百度vue服务端渲染(ssr)有感
前端各种框架工具层次不穷,日新月异,越学越混乱了快 知乎上看到了一段回复,豁然开朗的感觉. Web 2.0时代最大的思想革命本质不是前后端分离,而是把网页当作独立的应用程序(app).前后端分离只是实 ...
- ES6学习笔记(四)—— async 函数
await 是 async wait 的简写, 是 generator 函数的语法糖. async 函数的特点: async 声明一个方法是异步的,await 则等待这个异步方法执行的完成 async ...
- Html 让文字显示在图片的上面
如题: 第一种方式便是将 image 作为背景图片,即:background-image:url("......."); 在此可以控制背景图片的横向和纵向的平铺: backgrou ...
- 利用saltstack初始化OpenStack服务器环境
目录架构图如上图所示 sls脚本详情如下: Sync_Host: file.managed: - name: /etc/hosts - source: salt://state/files/hosts ...
- TCP(一)
TCP的特点:三次握手.四次挥手.可靠连接.丢包重传.所有的关键词都围绕着可靠传输. 实现可靠传输的核心机制:seq+ack.通过ack判断是否有丢包,是否需要重传. 三次握手 1)初始状态:clie ...
- JVM 性能排查 自己做的笔记
Live Memory 1.Class Tracker 展示类或包的实例个数与时间的关系.需要录制才可以看到. 1)可以添加指定的类或包. 2.All Objects 查看所有类的实例个数和大小.可以 ...
- certbot 免费httos证书申请
https://keelii.com/2016/06/12/free-https-cert-lets-encrypt-apply-install/
- 一.Select 函数详细介绍【转】
转自:http://www.cnblogs.com/hjslovewcl/archive/2011/03/16/2314330.html Select在Socket编程中还是比较重要的,可是对于初学S ...
- 【 Tomcat 】tomcat8.0 基本参数调优配置
1.优化内核及TCP连接: fs.file-max = # 系统文件描述符总量 net.ipv4.ip_local_port_range = # 打开端口范围 net.ipv4.tcp_max_tw_ ...