2013-02-26 6 views
6

पर बदलती है, मैं Google नक्शे के लिए एक इंटरैक्टिव सर्कल चाहता हूं, जो स्लाइडर में त्रिज्या को बदलता या घटता है।
यह ठीक काम कर रहा है जब मैं त्रिज्या में वृद्धि कर रहा हूँ, लेकिन यह नक्शाGoogle मानचित्र में इंटरेक्टिव सर्कल जो बदलती त्रिज्या

$(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

आप पृष्ठ लोड (या अन्य घटना) पर 'Circle' बनाना होगा और बस' radius' को अद्यतन करने और पुनः बनाने 'Circle' जब भी यह बदल जाता है। – js1568

उत्तर

19

में बदल त्रिज्या को कम करने पर नहीं है (घटते) वृत्त वृत्त एक बार के बजाय हर स्लाइडर चाल घटना पर बनाएँ। स्लाइडर बदलते समय बस सर्कल के त्रिज्या को अद्यतन करें।

Untested कोड:

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

सहायक और प्रभावी –

+0

शानदार आप बस अपना दिन बचाओ! :) –

संबंधित मुद्दे