javascript - 谷歌地图中的交互式圆圈随半径变化而变化

Question

我想要一个用于谷歌地图的交互式圆圈，当我在 slider 中更改半径时它会增加或减少。
当我增加半径时它工作正常，但在减小半径时它不会改变(减小) map 中的圆

$(function() {
        $("#slide").slider({
               orientation: "horizontal",
               range: "min",
               max: 10000,
               min: 500,
               value: 500,
               slide: function( event, ui ) {
                            drawCircle(ui.value);
                                            }
                            });
             });

function drawCircle(rad){
      circle = new google.maps.Circle({
              strokeColor: "#FF0000",
              strokeOpacity: 0.8,
              strokeWeight: 2,
              fillColor: "#FF0000",
              fillOpacity: 0.35,
              map: myMap,
              radius: rad });

      circle.bindTo('center', marker, 'position');
                        }

Answer 1

创建圆圈一次，而不是在每次 slider 移动事件时创建。然后在 slider 变化时简单地更新圆的半径。

未经测试的代码:

var circle; //global variable, consider adding it to map instead of window

$(function() {
  circle = new google.maps.Circle({
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
    map: myMap,
    radius: 500
  });
  circle.bindTo('center', marker, 'position');

  $( "#slide" ).slider({
    orientation: "horizontal",
    range: "min",
    max: 10000,
    min: 500,
    value: 500,
    slide: function( event, ui ) {
     updateRadius(circle, ui.value);
    }
  });
});

function updateRadius(circle, rad){
  circle.setRadius(rad);
}