某些事件不触发

Question

我想制作一个简单的应用程序，用户可以画一个圆形并调整大小并拖动它，并在最后接收中心位置和距离。 我做到了，它工作正常，但当圆圈被拖动或调整大小，事件不会触发。

这是我的代码，请注意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> 

Answer 1

看来center_changed和distance_changed不能由DrawingManager Class

调度的事件有一个center_changed事件由Map class布控，但触发此事件时，地图的中心是改变，而不是中心圈覆盖。

编辑：（未经测试）

您必须使用Circle覆盖实例事件，radius_changed，drag或dragend

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()) 
    }); 
});