Javascript 使用范围滑块动态更新Google maps api中的半径标记

我有一个脚本，可以在谷歌地图中应用搜索半径。我可以更改半径并使其动态显示，但似乎不知道如何替换半径，而只是添加半径。该函数使用bindTo标记。我试过一次又一次地替换，但它们似乎不起作用

这是范围输入-

<input type="range" class="custom-range" id="customRange1" value="20">

---

因此，当我更改范围值时，它将在旧的半径覆盖上添加一个新的半径覆盖，我希望它用新的半径覆盖替换当前的半径覆盖。我猜这是因为我在使用bindTo。

保留对该圆的引用，如果该圆已经存在，则不创建新圆，而是更改现有圆：

  var circle;
  // Add circle overlay and bind to marker
  $('#customRange1').change(function() {
    var new_rad = $(this).val();
    var rad = new_rad * 1609.34;
    if (!circle || !circle.setRadius) {
      circle = new google.maps.Circle({
        map: map,
        radius: rad,
        fillColor: '#555',
        strokeColor: '#ffffff',
        strokeOpacity: 0.1,
        strokeWeight: 3
      });
      circle.bindTo('center', marker, 'position');
    } else circle.setRadius(rad);
  });

代码片段：

函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
中心：{
lat:-34.397，
液化天然气：150.644
},
缩放：8
});
var圈；
var marker=new google.maps.marker({
地图：地图，
位置：map.getCenter（），
标题：“姓名”
});
//添加圆形覆盖并绑定到标记
$（'#customRange1'）。更改（函数（）{
var new_rad=$（this.val（）；
var rad=新的_rad*1609.34；
如果（！circle | |！circle.setRadius）{
圆圈=新的google.maps.circle({
地图：地图，
半径：rad，
填充颜色：'#555'，
strokeColor:“#ffffff”，
笔划不透明度：0.1，
冲程重量：3
});
圆圈.bindTo（'中心'，标记，'位置'）；
}else圆。设定半径（rad）；
});
}

html，
身体，
#地图{
身高：100%；
保证金：0；
填充：0；
}

---

保留对该圆的引用，如果该圆已存在，则不创建新圆，而是更改现有圆：

  var circle;
  // Add circle overlay and bind to marker
  $('#customRange1').change(function() {
    var new_rad = $(this).val();
    var rad = new_rad * 1609.34;
    if (!circle || !circle.setRadius) {
      circle = new google.maps.Circle({
        map: map,
        radius: rad,
        fillColor: '#555',
        strokeColor: '#ffffff',
        strokeOpacity: 0.1,
        strokeWeight: 3
      });
      circle.bindTo('center', marker, 'position');
    } else circle.setRadius(rad);
  });

代码片段：

函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
中心：{
lat:-34.397，
液化天然气：150.644
},
缩放：8
});
var圈；
var marker=new google.maps.marker({
地图：地图，
位置：map.getCenter（），
标题：“姓名”
});
//添加圆形覆盖并绑定到标记
$（'#customRange1'）。更改（函数（）{
var new_rad=$（this.val（）；
var rad=新的_rad*1609.34；
如果（！circle | |！circle.setRadius）{
圆圈=新的google.maps.circle({
地图：地图，
半径：rad，
填充颜色：'#555'，
strokeColor:“#ffffff”，
笔划不透明度：0.1，
冲程重量：3
});
圆圈.bindTo（'中心'，标记，'位置'）；
}else圆。设定半径（rad）；
});
}

html，
身体，
#地图{
身高：100%；
保证金：0；
填充：0；
}