关于在地图上释放形状后立即停止绘图模式的问题

时间:2014-12-20 08:13:03

标签: google-maps google-maps-api-3

请您查看This Demo并告诉我如何在完成第一个对象的绘制时强制Google地图进入绘图模式!

正如您在演示中所看到的,绘图模式保持每种选定的类型,直到用户点击“停止绘图”控件,但我需要将其更新为自动检测到的格式。

这是我的代码:

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

谢谢,

1 个答案:

答案 0 :(得分:1)

文档说明这些事件存在于DrawingManager中:

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

如果你想在它们发生时做某事,为它们添加一个监听器:

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

proof of concept fiddle

代码段:



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>
&#13;
&#13;
&#13;