Google Maps V3 DrawingManager 不记得可编辑/可拖动标志

Question

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

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

文档并不清楚应该预期什么，但这种不一致对我来说似乎是 Google 地图中的一个错误。最终，我不想单独跟踪 DrawingManager 的状态并传递它。

有人知道为什么会这样吗？

查看此示例并注意 DrawingManager 和 Polygon 的行为方式的差异。原始多边形是可编辑的，但使用 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

您将 drawingManager polygonOptions 设置为未定义 editable 或 draggable（两者都默认为 false）。

如果您希望drawingManager 绘制的多边形可编辑或可拖动，则需要在调用drawingManager.setOptions 时将其设置为true：

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

proof of concept fiddle

代码 sn-p：

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

});

html,
body,
#map_div {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>
<div id="map_div"></div>