百度地图API实战 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

事件基础

这一小节我们将学习事件的概念、监听、和移除。

1、事件的概述

百度地图API拥有一个自己的事件模型,我们可监听地图API对象的自定义事件,使用方法和DOM事件类似。注意,百度地图API事件是独立的,与标准DOM事件不同。

2、事件监听

百度地图事件包括地图加载完成事件、地图单击、双击、鼠标移动、拖拽事件,以及添加控件添加覆盖物事件等等

3、事件的参数

百度地图API在事件监听函数中传递事件对象e,每个e参数至少包含事件类型(type)和触发该事件的对象(target)。 API还保证函数内的this指向触发(同时也是绑定)事件的API对象。

除了上一小节我们用到的为标注绑定点击事件,我们还可以看一个简单的获取point案例

var pointInfo = document.getElementById('pointInfo');
map.addEventListener("click", function(e){
 showInfo(e);
});
function showInfo(e){
  pointInfo.innerHTML = '鼠标点击处point:'+'('+e.point.lng+','+ e.point.lat+')';
}

4、事件的移除

事件的移除只需要使用map.removeEventListener()函数即可

map.removeEventListener("click", showInfo);
为地图绑定鼠标点击事件
map.addEventListener("click", showInfo);