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

Question

我已经成功使用了google地图绘图管理器。现在我面临一个问题。在图像中显示了两种形状折线和多边形。我只想在单击这些图标时显示一个警报，即单击多边形时显示一条消息 'polygon is clicked'，当单击线时它显示一条消息 'polyline is clicked'.icons image is here

Answer 1

如果您想知道 DrawingManager 的绘图模式何时更改（单击按钮是一种方法），请向 DrawingManager 添加一个侦听器以获取“drawingmode_changed”事件：

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

proof of concept fiddle

代码片段：

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>

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

how to register click listener on drawing manager icons panel in google map?

javascript

google-maps

postgis

google-maps-api-3