Javascript 在谷歌地图上创建事件动画

我正在尝试使用谷歌地图上的

google.maps.Circle

创建事件动画方法

我所说的事件动画是什么意思：假设有人从网站购买物品时，我试图在地图上创建一个小的扩展圆动画。一个事件与lat、lon一起发布，脚本应该能够在该位置显示一个扩展圆的小动画

到目前为止，我已经能够在随机位置的每次点击上模拟1000个动画，使用：

function animate(map, lat, lon) {
    var counter = 0;
    var arrayObj = new Array();
    var count = 1;
    for (var counter = 0;counter < 10 ; counter++) {
    setTimeout(function() {
      var myCity = new google.maps.Circle({
          center: new google.maps.LatLng(lat, lon),
          strokeColor:"#160EB3",
          strokeOpacity:0.2,
          strokeWeight:2,
          fillColor:"#160EB3",
          fillOpacity:0.5
        });
        myCity.setRadius((count++ * (21 - map.getZoom()) * 10) * (21 - map.getZoom()) * 2);
        myCity.setMap(map);
        if(arrayObj.length > 0)
            arrayObj[0].setVisible(false);
        arrayObj[0] = myCity;
        if(count == 11)
            arrayObj[0].setVisible(false);
    }, counter * 60);
  }
}

函数动画（贴图、横向、纵向）{
var计数器=0；
var arrayObj=新数组（）；
var计数=1；
用于（变量计数器=0；计数器<10；计数器++）{
setTimeout（函数（）{
var myCity=new google.maps.Circle({
中心：新google.maps.LatLng（lat，lon），
strokeColor:#160EB3“，
笔划不透明度：0.2，
冲程重量：2，
填充颜色：“160EB3”，
填充不透明度：0.5
});
myCity.setRadius（（count++*（21-map.getZoom（））*10）*（21-map.getZoom（））*2）；
myCity.setMap（map）；
如果（arrayObj.length>0）
arrayObj[0].setVisible（false）；
arrayObj[0]=myCity；
如果（计数=11）
arrayObj[0].setVisible（false）；
}，柜位*60）；
}
}

调用脚本：

google.maps.event.addListener(map, "click", function(overlay) {
    for(var k = 0; k < 1000; k++) {
        setTimeout(function(){animate(map, overlay.latLng.jb + Math.random() * 3, overlay.latLng.kb + Math.random()* 4)}, k * 1000);
    }
});

google.maps.event.addListener（映射，“单击”，函数（覆盖）{
对于（var k=0；k<1000；k++）{
setTimeout（函数（）{animate（map，overlay.latLng.jb+Math.random（）*3，overlay.latLng.kb+Math.random（）*4）}，k*1000）；
}
});

问题:

• 动画不是平滑的

• 它将CPU利用率提高到异常水平

• 无法使半径在不同的缩放级别上保持不变

---

有没有其他方法可以这样做？

这可能会有帮助。评论太琐碎，无法作为答案发布。