以下内容转载自多多洛爱学习的文章《JSAPI-在地图上添加自定义覆盖物》
作者：多多洛爱学习
链接：https://juejin.im/post/5ee5f80d51882542e2695874
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
地图上的覆盖物
在地图上添加覆盖物有两种方式，一是在canvas画布上渲染，比如JSAPI GL绘制MultiMarker/MultiPolygon等矢量图形覆盖物就是通过编写对应图形的数据解析及渲染程序，直接绘制在底图上层。这样的渲染方式下视角变换时图形也可以实现3D形变。另一种方式是通过CSS布局将其他DOM元素叠加到地图容器之上，这种方式下视角变换时DOM元素需重新计算布局，比如JSAPI v2的Marker/Polygon等覆盖物，以及JSAPI GL的InfoWindow信息窗，这些都属于DOM覆盖物。
如果你需要叠加一个自定义的复杂元素，第一种方式的话需要实现对应的数据解析和着色器程序，需要了解WebGL的渲染原理，成本很高，且不易变通。而DOM是每个前端工程师都非常熟悉的，简单几个标签加CSS就能实现高度定制的DOM元素。但是如何将一个DOM元素正确地安置在地图上，并且随着地图平移、旋转、缩放实时调整自己的位置呢？
这就要使用到DOMOverlay了。它并不是一个具体的DOM覆盖物，而是所有DOM覆盖物的抽象基类，InfoWindow就继承自它。DOMOverlay抽象出了DOM覆盖物的生命周期，公共属性及方法，实现了地图事件的监听绑定及解绑，你只需要关注DOM节点的创建和位置计算方法即可。
DOMOverlay 接口设计
先来看看DOMOverlay的类关系图，这里结合了官网示例DOMOverlay中定义的Donut类作为DOMOverlay的实现：
公共属性及方法
事件监听及触发
从上图可见，DOMOverlay继承自Node.js的EventEmitter类，所以它已经实现了事件监听、触发等功能的封装，不太熟悉的同学可以看看Node.js EventEmitter | 菜鸟教程。
地图绑定与解绑
DOMOverlay有一个公共属性map，其值为该覆盖物绑定的地图实例，同时提供了setMap(map: Map)和getMap()方法作为map参数的访问器。
要将自定义覆盖物显示在地图上，首先得明确具体的地图实例，有两种办法，一是在初始化参数中定义map属性，二是通过setMap进行动态设置，可以绑定到另一个地图实例上，或者解绑。setMap做了什么呢？绑定时一方面主要是将createDOM()返回的DOM元素加入到特定的节点下，使其覆盖在地图上方且可以进行相对定位；另一方面是监听地图变换执行updateDOM()，使DOM元素可以跟随地图更新定位或内容。解绑时则是将其从父节点下去除，同时删除对地图事件的监听。DOM元素DOMOverlay的公共属性dom指向的是该覆盖物的具体元素，可以是HTMLElement或者SVGElement，该元素的创建由子类进行实现，绑定地图后会挂载到覆盖在canvas画布上层的一个div容器中。销毁当覆盖物不再被使用时应适时进行销毁操作，以防内存泄漏。destroy方法封装了销毁时应执行的操作，一方面将地图解绑，另一方面删除对象上注册的所有监听器。抽象方法DOMOverlay提供了4个抽象方法，在生命周期的不同阶段进行调用。
onInit在初始化阶段调用，并透传了构造函数的参数options，用于参数注入createDOM在初始阶段调用，用于创建DOM元素并将其返回，作为dom属性的值，并加入到特定的父节点下updateDOM在地图发生平移、缩放、旋转时调用，用于更新DOM元素定位onDestroy在销毁阶段调用，可在此函数中对自定义的对象和事件监听进行删除
具体的生命周期如下：
