最近在做有关地图的工作,使用的技术栈是谷歌地图,先说一下需求吧。
需求背景:
现在地图上有marker,我要在marker上面添加一层扩散波的波纹效果;
整体思路:
首先要考虑,实现扩散波的起点,或者说入口,就是谷歌地图的maps对象里的Circle方法。实现扩散其实就是需要在marker上使用circle画一些圆,然后让圆圈以一定的速度改变半径、透明度等要素;
下面开始上代码啦:
function DiffusionWave(radius, level, point, color, zoom, map) {
this.radius = radius // 半径
this.google = window.google
this.level = level // 扩散波数量
this.point = point // 添加扩散波的位置
this.zoom = zoom // 地图层级
this.map = map // 谷歌地图实例
this.color = color // circle配置对象,主要是fillColor,fillOpacity等,根据业务需求可以自己添加其他属性
// 我自己的代码在这里由于需求,有一部分限制扩散波范围的逻辑,就是一些简单的判断,需要的朋友自己加一下,我就不写了。
this.endOpacity = 0.5
this.speedOpacity = (this.color.fillOpacity - this.endOpacity) / this.radius
// 这里是计算了每一次变化透明度的变化速度
this.circles = []
for (let i = 1; i < this.level; i++) {
const circle =