いくつかのイベントがトリガーされていません

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はなく、センターがありMap classによって派遣center_changedイベントであるが、このイベントは、地図の中心が変更されたときにトリガされDrawingManager Class

によって送出されたイベントではありません円のオーバーレイの

編集：あなたはこのようradius_changedCircleオーバーレイインスタンスのイベントを使用する必要があります（未テスト）

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