6

スライダーの半径を変更すると増減するGoogleマップ用のインタラクティブな円が必要です。
半径を大きくしているときは正常に機能していますが、半径を小さくすると、マップ内の円が変化(減少)しません

$(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');
                        }
4

1 に答える 1

22

スライダーの移動イベントごとではなく、円を 1 回作成します。次に、スライダーが変化したときに円の半径を更新するだけです。

テストされていないコード:

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);
}
于 2013-02-26T17:31:43.103 に答える