高德地图上面的marker的一些方法没有百度地图多 参考了一篇关于百度地图marker雷达图的文章 博主很强大 给他点个赞
具体实现思路 ：每一帧改变一下circle半径即可。然后多个circle覆盖在一起，按时间差进行绘制，向外扩散时又同步缩减透明度，即可实现水波纹效果。
this.map = new AMap.Map("container",{
// mapStyle: "amap://styles/b12367f2f40ea09b8ae2309649bdb07d", //设置地图的显示样式
// mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式
zoom: 15, //设置地图的缩放级别
center: this.center, //设置地图的中心点
resizeEnable: true
});
let marker = new AMap.Marker({
icon: gif,
zIndex: 101,
offset:new AMap.Pixel(25,-49),
map: this.map,
position: [114.39598, 30.51792]
});
let circleMarker = new AMap.Circle({
center:this.center,
map: this.map,
radius:10,
fillColor:"#FF4D50", //圆形填充颜色
fillOpacity: 0.2, //填充透明度
strokeWeight: 1 ,
strokeColor:"#FF4D50", //线条颜色，为了保证感觉无线条，和填充颜色一致即可
strokeOpacity: 0.2, //线条透明度，为了保证感觉无线条，和填充颜色透明度一致即可
cursor:'pointer',
zIndex:15,
extData:"data-id"
})
console.log(circleMarker)
AMap.event.addListener(circleMarker, "click", markerClickFire);
function markerClickFire(e) {
console.log(circleMarker.getExtData())
console.log(e.target.data)
}
let requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame;
let cancelAnimationFrame = window.cancelAnimationFrame || window.webkitCancelAnimationFrame;
let that = this
function CircleShow(radius,level,color){
this.radius = radius;
this.level = new Number(level);
this.color = color;
if(Number.isNaN(this.level)){
this.level = 1;
}//至少1层
if(!this.color || !this.color.fillColor){
this.color = {
fillColor:"blue",//默认蓝色
fillOpacity:0.5 //默认初始透明度0.5
}
}
//计算平均每段扩展距离的透明度
this.endOpacity = 0.1; //终止透明度设置为0.1
this.speedOpacity = (this.color.fillOpacity - this.endOpacity)/this.radius; //每米的透明度
//先加一层白色的覆盖物，加在图片上表示覆盖范围
this.circle0 = new AMap.Circle({
map:that.map,
center:that.center,
radius:this.radius,
fillColor:"white",
fillOpacity: 0.2,
strokeWeight: 1 ,
strokeColor:"white",
strokeOpacity: 0.2
});
//按层数循环构造覆盖物，并加在图片上
this.circles = new Array();
for(let i=1; i< this.level; i++){
let circle = new AMap.Circle({
map:that.map,
center:that.center,
radius:0,
fillColor:this.color.fillColor,
fillOpacity: this.color.fillOpacity,
strokeWeight: 1,
strokeColor:this.color.fillColor,
strokeOpacity: this.color.fillOpacity
});
this.circles.push(circle);
}
this.clock=new Array(this.level);
}
CircleShow.prototype.start = function (distance,t0){
let _self = this;
/**
* 定义动画函数
* @param startTime 启动的初始时间
* @param circle 圆形覆盖物对象
* @param index 序号
*/
function animateStart(startTime,circle,index){
//计算时间差
let time = new Date().getTime()-startTime;
if(time<0){
circle.setOptions({
map:that.map,
center:that.center,
radius:0,
fillColor:_self.color.fillColor,
fillOpacity: _self.color.fillOpacity,
strokeWeight: 1,
strokeColor:_self.color.fillColor,
strokeOpacity: _self.color.fillOpacity
})
// circle.setRadius(0); //半径
// circle.setFillOpacity(_self.color.fillColor); //透明度
// circle.setStrokeOpacity(_self.color.fillOpacity); //透明度
//如果未达到执行实现则直接等待
_self.clock[index] = window.requestAnimationFrame(animateStart.bind(null,startTime,circle,index));
return;
}
//计算当前半径
//匀减速运动下，每隔t时间，应该扩散的半径:
//r=r0*(2*t*t0-t*t)/t0
//其中，r0为最终的扩散半径，即this.radius
let r = Math.floor(_self.radius*(2*time/t0-time*time/t0/t0));
let opacity = 0;
if(time >= t0){
//达到运行时间之后
//设置圆形覆盖物的样式
circle.setOptions({
map:that.map,
center:that.center,
radius:_self.radius,
fillColor:_self.color.fillColor,
fillOpacity: _self.endOpacity,
strokeWeight: 1,
strokeColor:_self.color.fillColor,
strokeOpacity: _self.endOpacity
})
// circle.setRadius(_self.radius); //半径
// circle.setFillOpacity(_self.endOpacity); //透明度
// circle.setStrokeOpacity(_self.endOpacity); //透明度
startTime = new Date().getTime() + distance; //起始时间设置为当前时间加上1倍的时间间隔
_self.clock[index] = window.requestAnimationFrame(animateStart.bind(null,startTime,circle,index));
}else{
//计算透明度
let opacity = _self.color.fillOpacity -
Number.parseFloat((_self.speedOpacity * r).toFixed(5)); //四舍五入小数点后5位
//设置圆形覆盖物的样式
circle.setOptions({
map:that.map,
center:that.center,
radius:r,
fillColor:_self.color.fillColor,
fillOpacity: opacity,
strokeWeight: 1,
strokeColor:_self.color.fillColor,
strokeOpacity: opacity
})
// circle.setRadius(r); //半径
// circle.setFillOpacity(opacity); //透明度
// circle.setStrokeOpacity(opacity); //透明度
_self.clock[index] = window.requestAnimationFrame(animateStart.bind(null,startTime,circle,index));
}
}
//循环每一层执行动画
for (let [index,circle] of this.circles.entries()) {
animateStart(new Date().getTime()+index*distance, circle, index);
}
}
//半径、层数、中心点、{填充颜色、初始透明度}
var circles = new CircleShow(40, 5, {fillColor:'#FF4D50',fillOpacity:0.5});
//参数：每一层播放的间隔时间、每一层扩散至最大所花费的总时间。
circles.start(1000,4000);
参考文章https://blog.csdn.net/yingjia11/article/details/86540150