谷歌地图绘图管理器在引脚掉落后启动绘图

Google Maps DrawingManager initiate draw after pin drop

本文关键字：绘图 启动 引脚 管理器 谷歌地图      更新时间：2023-09-26

是否有一种方法可以使用Google Map API绘制库启动对象的绘制？我有以下工作流程

  1. 用户双击地图
  2. 引脚掉落
  3. 使用DrawingManager绘制圆

然而，在#2和#3之间，还需要一个额外的点击。这个额外的点击周围还有什么吗？

http://jsfiddle.net/gu2wD/9/

   function createCircle() {
          //create drawing manager to draw circle on map
          var drawingManager = new google.maps.drawing.DrawingManager({
          drawingMode: google.maps.drawing.OverlayType.CIRCLE,
          drawingControl: true,
          drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [
              google.maps.drawing.OverlayType.CIRCLE
            ]
          },
          circleOptions: {
            strokeColor: '#0099FF',
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: '#0099FF',
                fillOpacity: 0.35,
                map: map,
                center: marker.getPosition(),
                editable: true,
                radius: 50
          }
        });
      drawingManager.setMap(map);
      google.maps.event.addListener(drawingManager, 'circlecomplete', function (circle) {
        popUpPinInfo(marker, circle.radius, map);
      google.maps.event.addListener(circle, 'radius_changed', function () {
        popUpPinInfo(marker, circle.radius, map);
      });
    });

    google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
              drawingManager.setDrawingMode(null);
    });

    }

我认为它真的很接近。但是，当我使用绘图管理器（它允许我拾取半径上的更改事件）时，圆不会立即开始。导致额外的点击

查看文档，我没有发现可以用来检测标记何时被丢弃的事件。我认为position_changed事件有可能被触发，但这似乎只有当你将标记设置为可拖动并物理移动时才会发生。

因此，我认为您最好的选择是在双击处理程序中使用setTimeout来延迟绘制圆，直到标记就位。像这样的东西（见小提琴）：

google.maps.event.addListener(map, 'dblclick', function() { 
    createMarker();
    setTimeout(createCircle, 500);
});
function createMarker() {
  // create the marker
}
function createCircle() {
  // create the circle       
}

编辑：

@geocodezip友好地提供了一个改进的fiddle，其中标记被放置在双击的位置，并且圆圈是可编辑的。

相关文章：