Google Maps API V3 - 通過點擊事件改變圓的半徑

我使用下面的代碼來顯示半徑爲60.000米的圓點擊事件。Google Maps API V3 - 通過點擊事件改變圓的半徑

<html> 
<head> 
<div id="map"></div> 
<style media="screen, projection" type="text/css"> 

map { 
     width: 800px; 
     height: 600px; 
     } 

</style> 
</head> 
<body> 

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> 

</script><script type="text/javascript"> 

     function initialize() 
     { 
      var mapCenter = new google.maps.LatLng(40, -74); 

      var map = new google.maps.Map(document.getElementById('map'), { 
       'zoom': 7, 
       'center': mapCenter, 
       'mapTypeId': google.maps.MapTypeId.ROADMAP 
      }); 

      // Add click event listener 

      google.maps.event.addListener(map, "click", function (e) { 

       var image = new google.maps.MarkerImage( 
         'image/data/ConstBuilder/marker.png', 
          new google.maps.Size(40, 35), 
          new google.maps.Point(0, 0), 
          new google.maps.Point(20, 30) 
         ); 

       var shadow = new google.maps.MarkerImage(
         'image/data/ConstBuilder/shadow.png', 
          new google.maps.Size(62, 35),  
          new google.maps.Point(0, 0),  
          new google.maps.Point(0, 35) 
         ); 

       var marker = new google.maps.Marker({ 
         draggable: true, 
         raiseOnDrag: false, 
         icon: image, 
         shadow: shadow, 
         map: map, 
         position: e.latLng 
       }); 

       var circle = new google.maps.Circle({ 
        map: map, 
        radius: 60000, 
        fillColor: '#AA0000' 
       }); 

       circle.bindTo('center', marker, 'position'); 
      }); 
     }; 

     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
</body> 
</html

現在我想添加一個funcionality - 單選按鈕，可以更改我的Click事件（顯示圓）的半徑值。我知道我需要使用getRadius（）方法，如新事件，並且我嘗試實現下面的代碼，但沒有成功。

google.maps.event.addDomListener(

document.getElementById('circle_radius'), 'change', function() { 

circle.setRadius(document.getElementById('circle_radius').value) 

});

如果有人能幫我找到解決辦法嗎？

最佳，達科

來源

2013-02-27 Darko J

嘗試用此更換你的代碼，改變部分是body標籤之後。

<html> 
<head> 
<div id="map"></div> 
<style media="screen, projection" type="text/css"> 

#map { 
     width: 800px; 
     height: 400px; 
     } 

</style> 
</head> 
<body> 
<div> 
30.000m <input type="radio" name="radiusBtns" id="radioBtn1" onclick="calcRadius(30000);" value="30" /><br /> 
60.000m<input type="radio" name="radiusBtns" id="radioBtn2" onclick="calcRadius(60000);" value="60" /><br /> 
90.000m<input type="radio" name="radiusBtns" id="radioBtn3" onclick="calcRadius(90000);" value="90" /> 
</div> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> 

</script><script type="text/javascript"> 
     var circle, map, pre_radius; 
     function initialize() 
     { 
      pre_radius = '60000'; 

      var mapCenter = new google.maps.LatLng(40, -74); 

      map = new google.maps.Map(document.getElementById('map'), { 
       'zoom': 7, 
       'center': mapCenter, 
       'mapTypeId': google.maps.MapTypeId.ROADMAP 
      }); 

      // Add click event listenecal 
      calcRadius(60000); 

     }; 

     function calcRadius(radiusVal) 
     { 
      //console.log(document.getElementById("#radioBtn1").value); 
      pre_radius = radiusVal; 
      google.maps.event.addListener(map, "click", function (e) { 

       var image = new google.maps.MarkerImage( 
         'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png', 
          new google.maps.Size(40, 35), 
          new google.maps.Point(0, 0), 
          new google.maps.Point(20, 30) 
         ); 

       var shadow = new google.maps.MarkerImage(
         'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png', 
          new google.maps.Size(62, 35),  
          new google.maps.Point(0, 0),  
          new google.maps.Point(0, 35) 
         ); 

       var marker = new google.maps.Marker({ 
         draggable: true, 
         raiseOnDrag: false, 
         icon: image, 
         map: map, 
         position: e.latLng 
       }); 

       circle = new google.maps.Circle({ 
        map: map, 
        radius: pre_radius, 
        fillColor: '#AA0000' 
       }); 

       console.log(circle); 

       circle.bindTo('center', marker, 'position'); 
      }); 
     } 

     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
</body> 
</html>

來源

2013-02-27 12:40:27

就是這樣，完美的作品，非常感謝你。 – 2013-02-27 13:48:04

使用單擊事件而不是更改事件。

希望進展

感謝

來源

2013-03-13 11:20:23 Praveen

Google Maps API V3 - 通過點擊事件改變圓的半徑

回答

相關問題