나는 동그라미를 그려서 크기를 조절하고 끌고 끝에서 중심 위치와 거리를받을 수있는 간단한 앱을 만들고 싶습니다. 잘 만들었지 만 원을 드래그하거나 크기를 조정하면 이벤트가 트리거되지 않습니다.어떤 이벤트가 발생하지 않습니다
이것은 내 코드입니다. overlaycomplete
및 circlecomplete
이 작동합니다.
<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>
dragend
내 편집 대답 –