2

google.maps.Circle我正在尝试在谷歌地图上创建一个事件动画方法。

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

到目前为止，我已经能够 使用以下命令在随机位置模拟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);
  }
}

调用脚本：

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

问题：

  • 动画不流畅。

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

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

有没有其他方法可以做同样的事情？

4

0 回答 0