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

使用动画绘制圆圈可以执行的选项是使用setRadius（）方法更改圆半径，并使用setInterval（）添加一些动画，如http://jsbin.com/nuwem/1/edit所示。

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 Maps JavaScript API v3.22中引入的新控件集中无法使用滑块的缩放值更改。在使用Google Maps JavaScript API的v3.22或v3.23时，您可以通过将控件样式设置为“azteca”来选择使用早期的控件集。

Answer 2

您正在倾听＆＃34; slideStop＆＃34;事件，如果你想在滑块值发生任何变化后立即改变，你应该聆听＆＃34;更改＆＃34;事件

无论如何，你在一个事件的回调中注册一个监听器，这将在每次用户移动滑块时绑定一个新的监听器。

这可能会完成工作（未经测试）：

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

如何在谷歌地图javascript上慢慢地在变化半径上绘制圆圈？

2 个答案: