示例中心
功能在线体验
控制台
您现在的位置: 开发 > 地图 JS API > 开发指南 > 其他功能 > 事件系统 >

高德 开发 地图 JS API 开发指南 其他功能 事件系统

更新时间:2017年05月23日

JavaScript API提供了完备的事件系统来满足开发者的各种需求,下面我们将一一介绍。

一、官方事件的绑定和移除

JavaScript API为地图、覆盖物、服务、控件对象包装了各种各样的事件,比如Map和Marker等覆盖物的各种鼠标和触摸事件、Map的zoomend和moveend等等。例如,地图事件和覆盖物事件的对应链接如下:

事件描述举例

参考手册地址

地图类事件

开发 > JavaScript API > 参考手册 > 地图

覆盖物事件

开发 > JavaScript API > 参考手册 > 覆盖物

针对于这些API官方提供的事件,我们可以通过两种常见的方式进行事件的绑定和移除,两种方式不建议混合使用。

第一种方式为使用AMap.event对象提供的方法,下面我们来实现给地图对象绑定和移除click事件,在click事件的响应函数中我们利用事件返回的经纬度位置创建一个简单的Marker:

var _onClick = function(e){
    new AMap.Marker({
        position : e.lnglat,
        map : mapObj
    })
}
var clickListener = AMap.event.addListener(mapObj, "click", _onClick); //绑定事件,返回监听对象
AMap.event.removeListener(clickListener); //移除事件,以绑定时返回的对象作为参数

第二种方方式可以使用对象的on、off方法:

var _onClick = function(e){
    new AMap.Marker({
        position : e.lnglat,
        map : mapObj
    })
};
mapObj.on('click', _onClick);//绑定
mapObj.off('click', _onClick);//移除

某些特殊情况下可能需要强制触发一些事件,针对上面两种方式,分别可以采用下面的两种方法:

AMap.event.trigger(mapObj, 'click');
mapObj.emit('click');

二、给DOM对象绑定和移除事件:

对于Web开发者来说,DOM对象的事件绑定常常要考虑各种浏览器的兼容性问题,使用JSAPI提供的方法来进行事件的绑定可以避免这一问题,比如在上一Demo 中,我们是使用onclick为button绑定了单击事件,使用API的话我们可以这么给id为button1的按钮绑定名为bind1的响应函数:

      
var bind1 = function(){
    reset();
    clickListener = AMap.event.addListener(mapObj, "click", _onClick);
}

var button1 = document.getElementById('bt1')
var listener = AMap.event.addDomListener(button1, 'click', bind1);//给div绑定单击事件

AMap.event.removeListener(listener);  //需要的时候移除事件

三、自定义事件的绑定、触发和移除

有些时候,我们想自己定义一些新的事件,举个简单的例子。比如在上面的例子中我们想在添加了一个marker之后触发一个count事件。这时候也可以使用我们在场景一使用的两种方式:

第一种方式:

var div = document.getElementById('count');
var _onCount = function(e){
    count.innerHTML = "总共添加了"+e.count + "个Marker";
}
var countListener = AMap.event.addListener(mapObj, "count", _onCount); 
var i = 0;
setInterval(function(){
    new AMap.Marker({map:mapObj});
    AMap.event.trigger(mapObj,'count',{count:i+=1})
},1000);
AMap.event.removeListener(countListener); //移除事件

第二种方式:

var div = document.getElementById('count');
var _onCount = function(e){
    count.innerHTML = "添加了"+e.count + "个Marker";
}
mapObj.on("count", _onCount); //绑定事件,返回监听对象
var i = 0
setInterval(function(){
    new AMap.Marker({map:mapObj});
    mapObj.emit('count',{count:i+=1});
},1000);
mapObj.off('count',_onCount); //移除事件,以绑定时返回的对象作为参数
移动端
示例中心
功能
在线体验
常见问题