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

我想要一个谷歌地图的交互式圈子，当我在滑块中改变半径时，它会增加或减少。
当我增加半径时工作正常，但是在半径减小时它不会在地图中改变（减少）圆

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