如何在谷歌地图的绘图管理器图标面板上注册点击侦听器？

Question

我已经成功使用谷歌地图绘图管理器。现在我面临一个问题。图中显示了折线和多边形两种形状。我想在单击这些图标时仅显示一个警报，即单击多边形时显示消息“单击多边形”，单击线条时显示消息“单击折线”。图标图像在这里

Answer 1

如果您想知道绘图模式何时发生DrawingManager变化（单击按钮是实现此目的的一种方法），请为DrawingManager“drawingmode_changed”事件添加一个侦听器：

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

概念证明小提琴

代码片段：

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