百度地图API详解之事件机制,function“闭包”解决for循环和监听器冲突的问题:

简介: 原文: 百度地图API详解之事件机制,function“闭包”解决for循环和监听器冲突的问题:   百度地图API详解之事件机制 2011年07月26日 星期二 下午 04:06 和DOM编程里的事件模型一样,百度地图API也提供了类似的事件机制。
原文: 百度地图API详解之事件机制,function“闭包”解决for循环和监听器冲突的问题:

 

百度地图API详解之事件机制
2011年07月26日 星期二 下午 04:06

和DOM编程里的事件模型一样,百度地图API也提供了类似的事件机制。本文介绍了事件监听的添加和移除方法,this指针和事件参数的使用以及绑定事件监听函数中涉及的闭包问题,最后分享了一个用来增强地图API事件机制的开源项目


事件添加和移除

我们最简单的事件开始,下面的代码示例给map对象添加了click事件的监听函数,当用户点击地图时该监听函数就会被触发:

var map =new BMap.Map('map');
map.centerAndZoom(
new BMap.Point(116.404, 39.915), 11);

map.addEventListener(
'click', function(){
alert(
'您点击了地图');
});

在初始化地图完成后,我们通过map对象的addEventListener方法添加click事件的监听。凡是在类参考文档中说明某个类具备某些事件时,我们都可以调用该对象的addEventListener方法添加响应的事件监听函数。

上面我们通过传入一个匿名函数添加了事件监听,如果我们需要移除事件监听,则需要将监听函数用具名函数表示:

var clickHandler =function(){
alert(
'您点击了地图');
}

map.addEventListener(
'click', clickHandler);

// 后续进行移除
map.removeEventListener('click', clickHandler);


事件参数

和DOM事件类似,在百度地图API的事件机制中也提供了事件参数,参数通过监听函数的参数进行传递,比如我们修改最开始的代码:

map.addEventListener('click', function(e){
alert(
'点击坐标: '+ e.point.lng +', '+ e.point.lat);
});

通过API的类参考文档得知,click事件的参数包含type、target、point和pixel四个属性,上面的示例就是获取了point属性,它表示当前点击的地理位置。


this

在事件监听中还可以通过this引用触发事件的对象,就像标准的DOM事件一样。

map.addEventListener('dragend', function(e){
alert(
this.getCenter()); // 这里的this就是map实例
});


事件闭包

闭包是Javascript脚本语言的特性之一,不熟悉它的开发者很可能犯下面这种错误:页面有十个标注(Marker实例),我希望点击不同的标注开启内容不同的信息窗口,每个信息窗口显示该标注的索引(1到10)。首先我们初始化标注实例并存放于数组中:

var markers = [];
for (var i =0; i <10; i ++) {
var mkr =new BMap.Marker(new BMap.Point(116.2+ i /20, 39.855), {title: i +1});
markers.push(mkr);
map.addOverlay(mkr);

}

我们给每个标注添加自己的title属性以示区分,你将看到如下效果:

下面,我们添加标注的点击事件,用来开启内容不同的信息窗口:

for (i =0; i <10; i ++) {
markers[i].addEventListener(
'click', function(){
this.openInfoWindow(new BMap.InfoWindow('我是第'+ (i +1) +'个标注'));
});
}

代码看起来没有任何问题,循环遍历markers数组,为每个标注实例绑定click事件,事件处理函数中开启信息窗口并显示是第几个标注。但是通过浏览器看效果的时候却发现问题了:

明明是第三个标注,点击之后的信息窗口中却显示“11”。实际上,当click的监听函数被执行的时候才会去看变量i的值是什么,此时for循环早已经执行完,那么当for循环执行完i的值正好是11。为了达到我们想要的效果,需要增加一层“闭包”:

for (i =0; i <10; i ++) {
(
function(){
var index = i;
markers[i].addEventListener(
'click', function(){
this.openInfoWindow(new BMap.InfoWindow('我是第'+ (index +1) +'个标注'));
});
})();
}

上面的代码你可以理解为新增加的函数内部保存了每次循环变量i的值,那么当监听函数执行时将会获取闭包内保存的index变量的值,而不是之前的变量i的值。再看一下,效果OK了:


对地图API事件增强

熟悉google地图API的人可能知道,其事件相关的接口要比百度地图API的接口丰富,除了提供简单的addListener和removeListener之外,还提供了clearListeners、clearInstanceListeners、trigger等方法。那么这些功能在百度地图API中如何实现呢?实际上百度地图API的内部也有事件机制并且与对外公开的事件共用一套机制,如果API提供了诸如clearListeners的方法必然会对API内部的逻辑造成影响,因此也就没有提供类似的接口。如果开发者很喜欢google地图API的事件机制模式并且非用不可怎么办呢,没问题,这里和大家分享一个我的开源项目,名字暂定为EventWrapper,它基于百度地图API,但提供了类似google地图事件机制的接口形式。开源项目地址:https://github.com/jiazheng/EventWrapper。src目录下的main.js就是全部代码了,这是开发版本,如果直接使用可以获取release目录下的eventwrapper.min.js。

我们通过几个例子来看一下它的使用方法,首先需要引用这个js脚本,这里就直接使用github提供的原始数据的地址:

https://raw.github.com/jiazheng/EventWrapper/master/release/eventwrapper.min.js

下面我们添加两个事件监听:

var clickListener = EventWrapper.addListener(map, 'click', function(e){
alert(e.point.lng
+', '+ e.point.lat);
});
var dragListener = EventWrapper.addListener(map, 'dragend', function(e){
alert(e.point.lng
+', '+ e.point.lat);
});

移除的方式如下:

EventWrapper.removeListener(dragListener);

我们将之前addListener方法返回的对象传递给removeListener即可,这和google的使用方式一致。此外我们还可以清除某个对象所有通过此方式绑定的事件:

EventWrapper.clearInstanceListeners(map); // 清除map实例所有的事件监听函数

此外EventWrapper还提供了addDomListener、addDomListenerOnce、addListenerOnce、clearListeners和trigger方法,具体使用方法可参考开发版本脚本中的注释信息(开发脚本原始数据地址:https://raw.github.com/jiazheng/EventWrapper/master/src/main.js)。

目前此项目基本完成,但是还没有经过大规模的测试和验证,可能存在不完善的地方,也欢迎广大开发者发现问题并进行反馈。

from:http://www.cnblogs.com/jz1108/archive/2011/07/16/2107199.html


目录
相关文章
|
23天前
|
JavaScript API
|
26天前
|
C++ 容器
函数对象包装器function和bind机制
函数对象包装器function和bind机制
15 0
|
3月前
|
并行计算 Java API
|
3月前
|
JavaScript 前端开发 定位技术
百度地图JavaScript API v2.0创建地图
百度地图JavaScript API v2.0创建地图
59 0
|
4月前
|
JavaScript 前端开发 定位技术
vue 使用 vue-jsonp 解决跨域请求问题(访问百度地图API)
vue 使用 vue-jsonp 解决跨域请求问题(访问百度地图API)
222 0
|
5月前
|
域名解析 JavaScript 网络协议
技术心得记录:如何使用google地图的api(整理)
技术心得记录:如何使用google地图的api(整理)
412 0
|
5月前
|
Java API Apache
详尽分享百度翻译api
详尽分享百度翻译api
102 0
|
6月前
|
定位技术 API
Angular 调用导入百度地图API接口,2024春招BAT面试真题详解
Angular 调用导入百度地图API接口,2024春招BAT面试真题详解
|
6月前
|
数据采集 分布式计算 DataWorks
DataWorks产品使用合集之DataWorks数据地图中的数据发现相关api接口调用如何解决
DataWorks作为一站式的数据开发与治理平台,提供了从数据采集、清洗、开发、调度、服务化、质量监控到安全管理的全套解决方案,帮助企业构建高效、规范、安全的大数据处理体系。以下是对DataWorks产品使用合集的概述,涵盖数据处理的各个环节。
48 0
|
6月前
|
Java 数据库连接 API
Java 学习路线:基础知识、数据类型、条件语句、函数、循环、异常处理、数据结构、面向对象编程、包、文件和 API
Java 是一种广泛使用的、面向对象的编程语言,始于1995年,以其跨平台性、安全性和可靠性著称,应用于从移动设备到数据中心的各种场景。基础概念包括变量(如局部、实例和静态变量)、数据类型(原始和非原始)、条件语句(if、else、switch等)、函数、循环、异常处理、数据结构(如数组、链表)和面向对象编程(类、接口、继承等)。深入学习还包括包、内存管理、集合框架、序列化、网络套接字、泛型、流、JVM、垃圾回收和线程。构建工具如Gradle、Maven和Ant简化了开发流程,Web框架如Spring和Spring Boot支持Web应用开发。ORM工具如JPA、Hibernate处理对象与数
150 3