Google Maps API V3 - 클릭 이벤트로 원 반경 변경

아래 코드를 사용하여 반경 60.000m의 클릭 이벤트로 원을 표시합니다. 내 Click 이벤트 (즉, 디스플레이 원)의 반경 값을 변경할 수 있습니다 라디오 버튼 -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를 추가 할. 새로운 이벤트와 같은 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-03-13 11:20:23 Praveen

Google Maps API V3 - 클릭 이벤트로 원 반경 변경

답변

관련 문제