2016-11-21 1 views
1

나는 동그라미를 그려서 크기를 조절하고 끌고 끝에서 중심 위치와 거리를받을 수있는 간단한 앱을 만들고 싶습니다. 잘 만들었지 만 원을 드래그하거나 크기를 조정하면 이벤트가 트리거되지 않습니다.어떤 이벤트가 발생하지 않습니다

이것은 내 코드입니다. overlaycompletecirclecomplete이 작동합니다.

<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script> 
<div id="map-canvas"></div> 


<script type="text/javascript"> 

function initialize() { 
    var mapOptions = { 
     center: new google.maps.LatLng(-34.397, 150.644), 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
     var drawingManager = new google.maps.drawing.DrawingManager({ 
     drawingMode: google.maps.drawing.OverlayType.CIRCLE, 
     drawingControl: false, 
     drawingControlOptions: { 
      position: google.maps.ControlPosition.TOP_CENTER, 
      drawingModes: [ 
       google.maps.drawing.OverlayType.CIRCLE 
      ] 
     }, 
     circleOptions: { 
      fillColor: '#000000', 
      fillOpacity: 0.6, 
      strokeWeight: 2, 
      clickable: false, 
      editable: true, 
      zIndex: 1 
     } 
    }); 

    google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) { 
     var coordinates = (e); 
     drawingManager.setDrawingMode(null); 
     }); 

    google.maps.event.addListener(drawingManager, 'circlecomplete', function (e) { 
     var coordinates = (e); 
     console.log(coordinates); 
     console.log('radius', coordinates.getRadius()); 
     console.log(coordinates.getCenter().lat()) 
     console.log(coordinates.getCenter().lng()) 
    }); 


    google.maps.event.addListener(drawingManager, 'center_changed', function (e) { 
     var coordinates = (e); 
     console.log(coordinates); 
     console.log('radius', coordinates.getRadius()); 
     console.log(coordinates.getCenter().lat()) 
     console.log(coordinates.getCenter().lng()) 
    }); 


    google.maps.event.addListener(drawingManager, 'distance_changed', function (e) { 
     var coordinates = (e); 
     console.log(coordinates); 
     console.log('radius', coordinates.getRadius()); 
     console.log(coordinates.getCenter().lat()) 
     console.log(coordinates.getCenter().lng()) 
    }); 

    drawingManager.setMap(map); 

}; 

google.maps.event.addDomListener(window, 'load', initialize); 

</script> 
+0

dragend 내 편집 대답 –

답변

1

center_changed 보인다 distance_changed가 아닌 중심이 거기 Map class에 의해 파견 center_changed 이벤트이지만,이 이벤트는지도의 중심이 변경 될 때 트리거되는 DrawingManager Class

에 의해 전달 된 이벤트 없습니다 서클 오버레이의

편집 : (안된)

당신은 Circle 오버레이 인스턴스 이벤트를 사용해야하는 등 radius_changed, drag 또는

google.maps.event.addListener(drawingManager, 'circlecomplete', function (circle) { 
    console.log('radius at creation', circle.getRadius()); 
    console.log('lat at creation', circle.getCenter().lat()) 
    console.log('lon at creation', circle.getCenter().lng()) 
    google.maps.event.addListener(circle, 'radius_changed', function() { 
     console.log('radius after change', circle.getRadius()); 
     console.log('lat after radius change', circle.getCenter().lat()) 
     console.log('lon after radius change', circle.getCenter().lng()) 
    }); 
    google.maps.event.addListener(circle, 'dragend', function() { 
     console.log('radius at dragend', circle.getRadius()); 
     console.log('lat at dragend', circle.getCenter().lat()) 
     console.log('lon at dragend', circle.getCenter().lng()) 
    }); 
}); 
+0

TNX는 'radius_changed'와 '및 center_changed'작품 참조 매력처럼 왜 mouseup 이벤트가 작동하지 않습니다? 이것은 내 코드 google.maps.event.addListener (원, 'mouseup', 함수 (이벤트) { alert ('test'); }}); – mehran

+0

은 원 안에 들어있는 경우에만 작동해야합니다. –

+0

예 (그렇지만 작동하지 않습니다) – mehran

관련 문제