谷歌地图实现扩散波效果

最近在做有关地图的工作,使用的技术栈是谷歌地图,先说一下需求吧。
需求背景:
现在地图上有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 = 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值