在地图上释放形状后立即停止绘图模式 [英] Stopping drawing mode as soon as releasing a shape on the map

问题描述

我正在研究此演示.完成第一个对象的绘制后，如何强制Google Map退出绘制模式?

I am working on this demo. How I can force the Google Map to quit the drawing mode when the drawing of first object is done?

正如您在演示中看到的那样，绘图模式将按所选的每种类型保持打开状态，直到用户单击停止绘图"控件，但我需要将其更新为自动检测的格式.

As you can see in the demo the drawing mode stay on by each of selected type until user clicks on "Stop Drawing" control but I need to update this to auto detected format.

这是我的代码:

  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var drawingStyle = {
        strokeWeight: 0,
        fillOpacity: 0.45,
        editable: true,
        draggable: true
    };
    var drawingManager = new google.maps.drawing.DrawingManager({

        drawingControl: true,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [
            google.maps.drawing.OverlayType.CIRCLE,
            google.maps.drawing.OverlayType.POLYGON,
            google.maps.drawing.OverlayType.RECTANGLE]
        },
        rectangleOptions: drawingStyle,
        polygonOptions: drawingStyle,
        circleOptions: drawingStyle
    });
    drawingManager.setMap(map);

推荐答案

文档指出这些事件存在于DrawingManager上:

The documentation states that these events exist on the DrawingManager:

• circlecomplete |圈|用户完成画圆后会触发此事件.
• markercomplete |标记|当用户完成绘制标记后，就会触发此事件.
• overlaycomplete | OverlayCompleteEvent |当用户完成绘制任何类型的叠加层时，都会触发此事件.
• polygoncomplete |多边形|用户完成绘制多边形后会触发此事件.
• polylinecomplete |折线|当用户完成绘制折线时会触发此事件.
• rectanglecomplete |矩形|用户完成绘制矩形后会触发此事件.

如果您想在它们发生时做一些事情，请为它们添加一个侦听器:

If you want to do something when they occur, add a listener for them:

google.maps.event.addListener(drawingManager,'overlaycomplete',function() {
    drawingManager.setOptions({drawingMode: null, drawingControl: false});
});

概念提琴证明

代码段:

function initialize() {
  map = new google.maps.Map(document.getElementById("map_canvas"), {
    center: {
      lat: 45,
      lng: -85
    },
    zoom: 5
  });

  var drawingStyle = {
    strokeWeight: 0,
    fillOpacity: 0.45,
    editable: true,
    draggable: true
  };
  var drawingManager = new google.maps.drawing.DrawingManager({

    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.CIRCLE,
        google.maps.drawing.OverlayType.POLYGON,
        google.maps.drawing.OverlayType.RECTANGLE
      ]
    },
    rectangleOptions: drawingStyle,
    polygonOptions: drawingStyle,
    circleOptions: drawingStyle
  });
  drawingManager.setMap(map);
  google.maps.event.addListener(drawingManager, 'overlaycomplete', function() {
    drawingManager.setOptions({
      drawingMode: null,
      drawingControl: false
    });
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
}

<script src="http://maps.google.com/maps/api/js?libraries=places,drawing"></script>
<div id="map_canvas" style="margin: 0.6em;"></div>

这篇关于在地图上释放形状后立即停止绘图模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！