如何在Google Map中的绘图管理器图标面板上单击“侦听器”

Question

我已经成功使用了Google Map Drawing Manger。现在我面临一个问题。在图像中，显示了两个形状的聚线和多边形。我想在单击这些图标时简单地显示一个警报，即单击多边形时显示消息"单击polygon"，当单击行时，它显示了"单击polyline"的消息。/div>

如果您想知道DrawingManager的绘图模式更改（单击按钮是一种方法），请将侦听器添加到 DrawingManager中的" drawsmode_changed";事件：

google.maps.event.addListener(drawingManager, "drawingmode_changed", function() {
  console.log("drawing mode changed:"+drawingManager.getDrawingMode());
})

概念证明小提琴

代码段：

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -34.397,
      lng: 150.644
    },
    zoom: 8
  });
  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
    },
    markerOptions: {
      icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
    },
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    }
  });
  google.maps.event.addListener(drawingManager, "drawingmode_changed", function() {
    console.log("drawing mode changed:" + drawingManager.getDrawingMode());
  })
  drawingManager.setMap(map);
}

#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing&callback=initMap&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk" async defer></script>