如何在Vue项目中利用百度地图API添加自定义水系覆盖物？

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

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

具体的实现过程如下：

具体的实现过程如下：

具体的实现过程如下：

具体的应用场景简而言之就是：需要在地图上添加如图所示的XX标记。

简介

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

话不多说，直接上图：

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

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

水波紋的实现

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

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

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

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

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

我们可以从图中观察得出先后总共有三个水波紋从里到外逐渐的往外扩散。