这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战
百度地图开发系列之地图事件的使用
写在前面：
-
本文为百度地图开发系列文章之一，
教程目录：
- webGIS，基于百度地图的HelloWord实现
- 如何使用前端css代码去掉百度地图左下角的图标
- 使用百度地图绘制点、线、面 | Javascript
- 百度地图开发系列之个性化地图使用的2种方法
- 百度地图开发之信息窗口与文本标注的基础使用
- 百度地图开发系列之地图事件的使用（本篇讲解）
以上对应视频教程（博客与视频前面的序号是一一对应的）：
-
个人前端网站：zhangqiang.hk.cn
-
欢迎加入博主的前端学习qq交流群：：706947563，专注前端开发，共同学习进步！
1 效果图
2 官方文档
3 个人消化后理解
3.1 简介
何为地图事件？当我们鼠标单击地图、双击地图、拖动地图、点击标注等，这些都称为地图事件，最常用的是，当程序检测这些事件时，会有一个与之对应的函数，来进行我们想要的操作。
3.2 如何使用
这里以单击事件来举例，更多的我们看查看官方文档的类参考，里面有很多种事件（mapopen-pub-jsapi.bj.bcebos.com/jsapi/refer…）。
好！我们来开始使用，首先，我们来给地图添加一个监听方法addEventListener(event: String, handler: Function)
可以看到，上面的addEventListener方法是Marker类里面的，但是本文直接调用了Map类里面的addEventListener方法是可以使用的，可在官方文档里面却有没有看到Map类里面有写，由此我推测这是隐藏的方法（官方文档不全？），如果在看博客的小伙伴知道是啥原因的话可以留言讨论一下哦。
addEventListener里面的第一个参数是要监听的事件是啥（点击，双击，拖动..），第二个是监听到后要执行的函数，好，下面请看关键代码：
map.addEventListener('click', function (e) {
alert('点击位置经纬度：' + e.latlng.lng + ',' + e.latlng.lat);
});
上面的代码意思是，当鼠标左键点击地图时浏览器会弹出一个窗口，显示当前点击的经纬度。
4 源码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body,
html,
#allmap {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
font-family: "微软雅黑";
}
</style>
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=GXn1gkhgbbWet55NCyKzjB7Hqfdh3gos">
</script>
<title>百度地图展示</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// // 点击事件函数 （函数表达式要写在调用的上面，先写，后调用）
// const areEventListenerFun = (e) => {
// console.log('这个事件是调用的外部函数，' + '点击位置经纬度：' + e.latlng.lng + ',' + e.latlng.lat);
// }
// GL版命名空间为BMapGL
// 按住鼠标右键，修改倾斜角和角度
var map = new BMapGL.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
// 调用事件函数 -方法2 ， 通过函数名调用 （增加可读性）
map.addEventListener('click', areEventListenerFun);
// 调用事件函数 -方法1 ，直接在里面写回调函数
map.addEventListener('click', function (e) {
alert('点击位置经纬度：' + e.latlng.lng + ',' + e.latlng.lat);
});
// 函数声明可以写在下面，因为会有函数提升，在哪里都可以调用
function areEventListenerFun(e) {
console.log('这个事件是调用的外部函数，' + '点击位置经纬度：' + e.latlng.lng + ',' + e.latlng.lat);
}
</script>
5 源码仓库地址
下面这个仓库为本篇知识点的源码地址，同时也是本系列的仓库地址，后面的源码更新都会在这个仓库里进行。
