谷歌地图中的交互圈在变化的半径上发生变化

问题描述

我想要一个Google地图的交互式圈子，当我在滑块中改变半径时，它会增加或减少。

当我增加半径时它工作正常，但在减小半径时它不会改变（减少）圈地图

  $（function（）{
 $（＃slide）。slider {
 orientation：horizo​​ntal，
 range：min，
 max：10000，
 min：500，
 value：500，
 slide ：function（event，ui）{
 drawCircle（ui.value）; 
} 
}）; 
}）; 
 
函数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'）; 
 
  

解决方案

在每个滑块移动事件。

未经测试的代码：

  var circle; //全局变量，考虑将其添加到映射而不是窗口
 
 $（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（{
方向：水平，
范围：min，
最大值：10000，
最小值：500，
值：500，
 slide：function ，ui）{
 updateRadius（circle，ui.value）; 
} 
}）; 
}）; 
 
 function updateRadius（circle，rad）{
 circle.setRadius（rad）; 
} 
  

I want an interactive circle for google maps, which increases or decreases as and when i change radius in slider.
It is working fine when i am increasing radius, but on decreasing radius it is not changing(decreasing) circle in map

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

解决方案

Create the circle once instead of on every slider move event. Then simply update the radius of the circle when the slider changes.

Untested code:

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

这篇关于谷歌地图中的交互圈在变化的半径上发生变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！