如何在vue中使用百度地图添加自定义覆盖物，实现水波纹效果？

本文共计2573个文字，预计阅读时间需要11分钟。

简介：一往情深，我给家人分享一个项目中遇到的比较有意思的需求，并介绍一下相应的实现过程。不多说，直接上图：

具体的场景应用简要而言，就是需要在地图上添加如上图所示的中字。

简介

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

话不多说，直接上图：

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

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

水波紋的实现

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

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

<div class="radar"></div>

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

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

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