Google Maps V3 DrawingManager无法记住可编辑/可拖动的标志

Question

我正在尝试创建Google Maps DrawingManager后的笔触和填充颜色。我不知道DrawingManager最初是否设置为具有可编辑和可拖动的多边形，因此我不想更改可编辑和可拖动的标志。我所要做的就是改变颜色。但是，如果我不提供可编辑和可拖动的值，DrawingManager会自动将它们设置为false。

这不是多边形的工作方式。如果创建多边形并将其设置为可编辑和可拖动，然后再更改其颜色，它将记住原始标志状态。

文档尚不清楚应有的内容，但对我来说，这种不一致似乎是Google Maps中的错误。最终，我不想不必分别跟踪DrawingManager的状态并将其传递出去。

任何人都对为什么这种行为会有所了解吗？

请参见本示例，并注意DrawingManager和“多边形”的行为方式不同。原始多边形是可编辑的，但是使用DrawingManager绘制的多边形则不能编辑。

https://jsfiddle.net/wv9zapud/

google.maps.event.addDomListener(window, "load", function() {

  var map = new google.maps.Map(document.getElementById("map_div"), {
    center: new google.maps.LatLng(25, -70),
    zoom: 5,
  });

  var triangleCoords = [{
      lat: 25.774,
      lng: -80.190
    },
    {
      lat: 18.466,
      lng: -66.118
    },
    {
      lat: 32.321,
      lng: -64.757
    },
    {
      lat: 25.774,
      lng: -80.190
    }
  ];

  var bermudaTriangle = new google.maps.Polygon({
    map: map,
    paths: triangleCoords,
    strokeColor: 'red',
    fillColor: 'red',
    editable: true,
    draggable: true
  });

  bermudaTriangle.setOptions({
    strokeColor: 'blue',
    fillColor: 'blue'
  });

  var drawingManager = new google.maps.drawing.DrawingManager({
    map: map,
    drawingMode: google.maps.drawing.OverlayType.POLYGON,
    drawingControl: false,
    polygonOptions: {
      fillColor: 'red',
      strokeColor: 'red',
      editable: true,
      draggable: true
    }
  });

  drawingManager.setOptions({
    polygonOptions: {
      fillColor: 'blue',
      strokeColor: 'blue'
    }
  });

});

Answer 1

您正在将TContent Doc<TContent>设置为未定义drawingManager或polygonOptions（两者都默认为false）。

如果您希望editable绘制的多边形是可编辑的且可拖动，则需要在调用draggable时将其设置为true：

drawingManager

proof of concept fiddle

代码段：

drawingManager.setOptions

drawingManager.setOptions({
  polygonOptions: {
    fillColor: 'blue',
    strokeColor: 'blue',
    editable: true,
    draggable: true
  }
});

google.maps.event.addDomListener(window, "load", function() {

  var map = new google.maps.Map(document.getElementById("map_div"), {
    center: new google.maps.LatLng(25, -70),
    zoom: 5,
  });

  var triangleCoords = [
    { lat: 25.774, lng: -80.190},
    { lat: 18.466, lng: -66.118},
    { lat: 32.321, lng: -64.757},
    { lat: 25.774, lng: -80.190}
  ];

  var bermudaTriangle = new google.maps.Polygon({
    map: map,
    paths: triangleCoords,
    strokeColor: 'red',
    fillColor: 'red',
    editable: true,
    draggable: true
  });

  bermudaTriangle.setOptions({
    strokeColor: 'blue',
    fillColor: 'blue'
  });

  var drawingManager = new google.maps.drawing.DrawingManager({
    map: map,
    drawingMode: google.maps.drawing.OverlayType.POLYGON,
    drawingControl: false,
    polygonOptions: {
      fillColor: 'red',
      strokeColor: 'red',
      editable: true,
      draggable: true
    }
  });

  drawingManager.setOptions({
    polygonOptions: {
      fillColor: 'blue',
      strokeColor: 'blue',
      editable: true,
      draggable: true
    }
  });

});