Question

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

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

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

1 个答案: