google.maps.Circle
Google マップを使用してイベント アニメーション メソッドを作成しようとしています。
イベント アニメーションの意味: 誰かが 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 使用率が異常なレベルまで上昇します。
異なるズーム レベルで半径を一定にすることができません。
同じことを行う代替手段はありますか?