百度地图,为了让事件使用的更方便,进行一层封装
详情可以看官方的文档 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; 。。。。。