如何在vue中使用百度地图添加自定义覆盖物（水波纹）动画效果

具体的应用场景简而言之就是需要我们在地图上添加如图中所示的自定义覆盖物。实现的过程作者分为以下两点给大家介绍介绍。

• 水波紋的实现
• 自定义覆盖物的实现

水波紋的实现

这个需求的实现肯定是离不开我们自己写自定义覆盖物的，那么首先我们来讨论一下水波纹动画的实现。

首先我们可以看到图中的覆盖物是由一个红心和水波紋组成，其中红心是固定不动的，那么我们可以直接这么写：

.radar {
 width: 40px;
 height: 40px;
 border-radius: 50%;
 background-color: red;
}

<div class="radar">div>

这样子我们首先就实现了红心部分的样式。那么水波紋又是怎么实现的呢？

我们可以从图中观察得出先后总共有三个水波紋从里到外逐渐的往外扩散。我们单独从一个水波紋来看的话，其实往外扩散的原理是通过动画让水波紋的宽高逐渐递增到一定程度即可，具体扩散多大呢读者可以根据自己的需求设定水波紋的最后宽高。

水波紋的基本结构和样式实现如下：

.radar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: red;
    position: relative;
    .ripple {
         width: 40px;
         height: 40px;
         border-radius: 50%;
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%,-50%);
         border: 1px solid red;
         animation: ripple 2s linear infinite;
    }
}

<div class="radar">
    <div class="ripple">div>
    <div class="ripple">div>
    <div class="ripple">div>
div>

之所以将水波紋的dom节点嵌套在radar节点里面主要是做一个“子绝父相”定位以达到水波紋居中对齐的效果，这个应该很容易理解。至于水波紋的初始宽高呢，为了方便动画延迟时间的计算，我就设置为跟红心宽高相等即可，如果读者有兴趣可以尝试一下宽高设置在0～40px任意值的看看效果（作者盲猜动画可能会有点瑕疵，可能也不会------>“手动狗头”））。

至于动画的实现呢，这个就很简单了，我们只需要同时将水波紋的宽高都逐渐变大即可，但是有个点要注意一下就是水波紋最后是会消失的，这里我们利用opacity：0配合动画达到逐渐消失的效果。

@keyframes ripple {
    to {
     width: 150px;
     height: 150px;
     opacity: 0;
    }
}

代码到了这里，我们水波紋已经是实现了，但是不是少了点什么？说好的三个水波紋呢？

这个问题也很好解决，我们只需要给水波紋设置对应的动画延迟即可。

.radar :nth-child(1) {
    animation-delay: 0.666s;
}
.radar :nth-child(2) {
    animation-delay: 1.322s;
}

自定义覆盖物的实现

本次作者采用的是百度地图实现的需求，那么如何通过百度地图来实现自定义覆盖物呢？

其实百度地图开发文档中也很直白的向我们展示自定义覆盖物的开箱方法。这里作者用es6的class稍微改写了一下写法，道理都一样的，官方案例可以参考百度地图demo

自定义覆盖物实现分以下三步：

• 定义构造函数并继承Overlay
• 初始化自定义覆盖物
• 绘制覆盖物

定义构造函数并继承Overlay

按照官网的说法是：“首先您需要定义自定义覆盖物的构造函数，通过构造函数参数可以传递一些自由的变量。设置自定义覆盖物对象的prototype属性为Overlay的实例，以便继承覆盖物基类”。

正在上传…重新上传取消

运用es6 class我们可以很快的实现：

其中point传递的是坐标位置，用于后续计算覆盖物在地图上的位置。

class RadarOverlay extends BMap.Overlay {
 constructor(point) {
  super();
  this.point = point;
 }
}

官方的说法是：“实现initialize方法，当调用map.addOverlay方法时，API会调用此方法。当调用map.addOverlay方法添加自定义覆盖物时，API会调用该对象的initialize方法用来初始化覆盖物，在初始化过程中需要创建覆盖物所需要的DOM元素，并添加到地图相应的容器中。这里我们选择添加在容器markerPane上。”

其实意思大概就是说，因为百度地图在添加overLay时会调用自定义覆盖物构造函数中的initialize方法，这个initialize方法是用来初始化覆盖物的，他会在初始化过程中创建所需要的DOM，因此我们要在我们自己的构造函数（这里我们用的是类）中实现一个initialize。

百度地图官网的方法:

那么我们就按照官网的要求，在类中定义一个initialize方法。其中template存的是我们初始化中所需要的DOM元素，这里的dom节点会比上文中实现水波纹的环节多了一个className为rader-box的父节点，因为在官网中我们也可以看到官方实例在创建DOM元素时给DOM节点添加了position:absolute的样式，但由于我们的radar节点的position为relative,所以我们需要在最外层多嵌套一层dom节点以确保整个dom相对于地图定位。当然啦该父节点的position也就为绝对定位

initialize(map) {
 this._map = map;
 const template = `