javascript - 某些事件未触发

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 调度的事件

Map class 调度了一个 center_changed 事件，但是本地图中心发生变化时会触发此事件，而不是当圆心叠加时触发。

编辑:(未经测试)

您必须使用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())
     });
});