示例中心
功能在线体验
控制台
您现在的位置: 开发 > 数据可视化 JS API > 教程 > 基础教程 > 事件 >

高德 开发 数据可视化 JS API 教程 基础教程 事件

更新时间:2018年03月22日

1. 交互事件

我们还可以为图层增加鼠标交互事件,通过 on()/off() 方法实现

// 绑定事件
layer.on('click', function(event) {
    console.log('Click target: ', event.target) // 触发click事件的元素
    console.log('Event type: ', event.type) // 事件名称
    console.log('Raw Event: ', event.originalEvent) // 原始DomEvent事件
    console.log('Raw data: ', event.rawData) // 触发元素对应的原始数据
    console.log('Lnglat: ', event.lnglat) // 元素所在经纬度
});

// 解绑事件
layer.off(‘click’);

除了支持基本鼠标的事件外,还支持 touchstarttouchendtouchmove 触摸事件。


2. 自定义事件 

除了交互事件外,Loca 还提供了业务相关的事件,这些事件常用来捕获特殊时间点,用以相关的业务逻辑。

比如:图层被添加或移除事件。您可以在某些图层添加移除后,进行关联业务的操作。

layer.on('add', function(event) {
    // 图层被添加后
}).on('remove', function(event) {
    // 图层被移除后
})


另外,由于底图的加载是异步进行的,因此 Loca 容器也提供 mapload 事件,用于判断底图都是加载完成,通常在这个时刻您就可以获取 AMap 的地图实例了。

var locaMap = Loca.create('map');
locaMap.on('mapload', function() {
    var amap = locaMap.getMap();
    // 获取地图添加地图相关组件
    amap.plugin(['AMap.ControlBar'], function () {
        var controlBar = new AMap.ControlBar();
        amap.addControl(controlBar);
    });
})


移动端
示例中心
功能
在线体验
常见问题