2013-02-26 20 views
6

Google Haritalar için, kaydırıcıdaki yarıçapı değiştirdiğimde veya azaldığında artan veya azalan etkileşimli bir daire istiyorum.
i yarıçapı çıkarmış oluyorum zaman iyi çalışıyor, ancak yarıçapı azalan üzerinde o daire kez yerine her sürgü hareket olayı oluşturun haritaDeğişen yarıçapı değiştiren google haritadaki interaktif daire

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

Sen sayfa yüklemesi (veya başka bir etkinlik) üzerinde 'Circle' oluşturmak ve daha sonra basitçe' radius' güncelleyebilir ve her değiştirdiğinde 'Circle' yeniden çizme gerekir. – js1568

cevap

19

daireyi değişen (azalan) değildir. Ardından, kaydırıcı değiştiğinde dairenin yarıçapını basitçe güncelleyin.

Untested kodu:

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

yararlı ve etkili –

+0

mükemmel sadece günümü kurtar! :) –

İlgili konular