谷歌地圖中的交互圈在變化的半徑上變化

Question

我想要一個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'); 
         } 

Answer 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); 
}