GoogleマップのJavaScriptでゆっくりと変化半径に円を描く方法は？

Question

私は、スライダーの値の変化をズームするようにGoogleマップjavascript apiを使って円を作成しました。半径をゆっくりと変更するとサークルを描くことができるかどうかを知りたいと思います。

slider.on("slideStop", function() { 
    circle.addListener('radius_changed', function() { 
    var bounds = circle.getBounds(); 
    map.fitBounds(bounds); 
});  
circle.setRadius(parseInt($("#ex6SliderVal").text() * 1000));        }); 

Answer 1

あなたはスライダ値に変更した直後に変更したい場合は、「変更」イベントをリッスンする必要があり、「slideStop」イベントのために聞いています。

とにかく、イベントのコールバック内にリスナーを登録すると、ユーザーがスライダを移動するたびに新しいリスナーがバインドされます。

これはおそらく（テストされていない）の作業を行います。

slider.on('change' , function(oldValue, newValue) { 
    circle.setRadius(newValue * 1000); 
    var bounds = circle.getBounds(); 
    map.fitBounds(bounds); 
}); 

Answer 2

アニメーションで円を描くように行うことができますオプションがsetRadius（）メソッドを使用して、円の半径を変更したsetIntervalを使用して、いくつかのアニメーションを追加することです（ ）である。

var direction = 1; 
var rMin = 150, rMax = 300; 
setInterval(function() { 
var radius = circle.getRadius(); 
if ((radius > rMax) || (radius < rMin)) { 
direction *= -1; 
} 
circle.setRadius(radius + direction * 10); 
}, 50); 

Zoom Control Style documentationで述べたように、スライダーの値の変更のズームは、GoogleマップのJavaScript APIのv3.22で導入されたコントロールの新しいセットでは使用できません。 Google Maps JavaScript APIのv3.22またはv3.23を使用しているときに、コントロールスタイルを 'azteca'に設定すると、以前のコントロールのセットを使用することができます。