功能修改，要求在地图上有个类似雷达的水波纹扩散的动画，通过大半天时间的研究、查找，终于完成了这项任务，话不多说，下面直接贴出代码，供有需要的兄弟参考,

1、首先在地图上画个圆如下图

2、新建个JS

/*校验时间 End*/

var timeStart, timeEnd, time;//申明全局变量

var radius = 300 //水纹圆半径(300米)

var circles1; //探测出入口的水波圆

var circles2; //探测出入口的水波圆

var circles3; //探测出入口的水波圆

var bl_drag = false; //拖拽地图控制开关

function getTimeNow() {//获取此刻时间

var now = new Date();

return now.getTime();

}

/*地图水波扩散特效 Start*/

let requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame;

let cancelAnimationFrame = window.cancelAnimationFrame || window.webkitCancelAnimationFrame;

/**

* sos告警圆形范围绘制(只有存在map对象时才可以使用)

* @param radius 半径

* @param level 层数

* @param point BMap.Point对象，圆的中心点

* @param color 颜色对象，包含{fillColor,fillOpacity}

* @constructor

*/

function CircleShow(radius,level,point,color,icon){

console.log(radius);

if(!window.map || !window.BMap|| !window.BMap.Circle){

return undefined;

}

this.radius = radius;

this.level = new Number(level);

this.point = point;

this.color = color;

// 创建 AMap.Icon 实例：

var xinhao_icon = new AMap.Icon({

size: new AMap.Size(20, 20),

// 图标尺寸

image: icon, // Icon的图像

imageSize: new AMap.Size(20, 20) // 根据所设置的大小拉伸或压缩图片

});

new AMap.Marker({

map: map,

icon: xinhao_icon,

position: point,

offset: new AMap.Pixel(-14, -5)

});

if(Number.isNaN(this.level)){

this.level = 1;

}//至少1层

if(!this.color || !this.color.fillColor){

this.color = {

fillColor:"blue",//默认蓝色

fillOpacity:0.3 //默认初始透明度0.3

}

}

//计算平均每段扩展距离的透明度

this.endOpacity = 0.1; //终止透明度设置为0.1

this.speedOpacity = (this.color.fillOpacity - this.endOpacity)/this.radius; //每米的透明度

//先加一层红色的覆盖物，加在图片上表示覆盖范围

/*this.circle0 = new BMap.Circle(this.point,this.radius,{

fillColor:"white",

fillOpacity: 0.2,

strokeWeight: 1 ,

strokeColor:"white",

strokeOpacity: 0.2,

enableEditing:false

});

map.addOverlay(this.circle0);*/

//按层数循环构造覆盖物，并加在图片上

this.circles = new Array();

for(let i=1; i< this.level; i++){

var circle = new AMap.Circle({

center: point,

icon: 'direct.png',

radius: radius, //半径

fillColor:this.color.fillColor, //圆形填充颜色

fillOpacity: 0.2, //填充透明度

strokeWeight: 1 ,

strokeColor:"#FF4D50", //线条颜色，为了保证感觉无线条，和填充颜色一致即可

strokeOpacity: 0.2, //线条透明度，为了保证感觉无线条，和填充颜色透明度一致即可

zIndex: 50

});

this.circles.push(circle);

circle.setMap(map);

}

this.clock=new Array(this.level);

}

/**

* 动画启动

* @param distance 波纹间隔时间(单位ms)

* @param t0 扩散一次所需的时间

*/

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.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.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.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);

}

};

/**

* 停止动画.

*/

CircleShow.prototype.stop = function(){

for(let caf of this.clock){

window.cancelAnimationFrame(caf);

}

//重置覆盖物样式

for(let circle of this.circles){

circle.setRadius(0); //半径

// circle.setFillOpacity(this.color.fillOpacity); //透明度

// circle.getStrokeOpacity(this.color.fillOpacity); //透明度

}

this.clock=null;

};

/**

* 移除覆盖物.

*/

CircleShow.prototype.remove = function(){

//停止动画

for(let caf of this.clock){

window.cancelAnimationFrame(caf);

}

map.remove(this.circle);

for(let circle of this.circles){

map.remove(circle);

}

};

/*地图水波扩散特效 End*/

3、页面初始化高德地图直接调用

水波纹扩散

效果如下

有一点需要注意一下：在这个循环的时候会显示entries未定义，也是纳闷了很久，但是我无意间导入了百度地图的JS后居然就可以了

导入文件

//百度地图JS

//高德地图

有关于那个循环问题有想法的大佬们，欢迎指教

参考文张:https://blog.csdn.net/yingjia11/article/details/86540150