关于在地图上释放形状时尽快停止绘图模式的问题 [英] Issue on Stopping Drawing Mode As Soon As Releasing A Shape On The Map

问题描述

你可以看看这个演示，让我知道如何强制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）; 
  

谢谢，

解决方案

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

• circlecomplete |圈| |当用户完成绘制圆时，会触发此事件。


• markercomplete |标记|当用户完成绘图标记时，会触发此事件。


• overlaycomplete | OverlayCompleteEvent |当用户完成绘制任何类型的叠加时，将触发此事件。
  
• polygoncomplete |多边形|当用户完成绘制多边形时，会触发此事件。 Polyline |当用户完成绘制折线时，将触发此事件。


• rectanglecomplete |矩形|当用户完成绘制矩形时，会触发此事件。

如果您想在事件发生时执行某些操作，它们：

  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（地图）; 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_canvasstyle =margin：0.6em;>< / div>

Can you please take a look at This Demo and let me know how I can force the Google Map to quite 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.

Here is the code I have:

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

Thanks,

解决方案

The documentation states that these events exist on the DrawingManager:

• circlecomplete | Circle | This event is fired when the user has finished drawing a circle.
• markercomplete | Marker | This event is fired when the user has finished drawing a marker.
• overlaycomplete | OverlayCompleteEvent | This event is fired when the user has finished drawing an overlay of any type.
• polygoncomplete | Polygon | This event is fired when the user has finished drawing a polygon.
• polylinecomplete | Polyline | This event is fired when the user has finished drawing a polyline.
• rectanglecomplete | Rectangle | This event is fired when the user has finished drawing a rectangle.

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

proof of concept fiddle

code snippet:

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屋！