vuebaidumap 删除覆盖物_如何在vue中使用百度地图添加自定义覆盖物（水波纹）

简介

一如既往，我来给大家分享一个项目中遇到的比较有意思的需求并介绍一下相应的实现过程。

话不多说，直接上图：

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

水波紋的实现

自定义覆盖物的实现

水波紋的实现

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

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

.radar {

width: 40px;

height: 40px;

border-radius: 50%;

background-color: red;

}

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

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

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

.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;

}

}

之所以将水波紋的dom节点嵌套在radar节点里面主要是做一个“子绝父相”定位以达到水波紋居中对齐的效果，这个应该很容易理解。至于水波紋的初始宽高呢，为了方便动画延迟时间的计