2

google.maps.CircleGoogle マップを使用してイベント アニメーション メソッドを作成しようとしています。

イベント アニメーションの意味: 誰かが Web サイトからアイテムを購入したときに、マップ上に小さな円が拡大するアニメーションを作成しようとしているとします。イベントは緯度、経度でリリースされ、スクリプトはその場所で円が拡大する小さなアニメーションを表示できるはずです。

これまでのところ 、以下を使用して、ランダムな場所でクリックするたびに 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