Google Maps V3 DrawingManager не помнит редактируемые / перетаскиваемые флаги

Question

Я пытаюсь установить обводку и цвет заливки в Google Maps DrawingManager через некоторое время после его создания.Я не знаю, был ли изначально DrawingManager настроен на редактируемые и перетаскиваемые полигоны, и поэтому я не хочу менять редактируемые и перетаскиваемые флаги.Все, что я не хочу делать, это изменить цвет.Однако кажется, что если я не предоставлю значения для редактируемых и перетаскиваемых объектов, DrawingManager автоматически установит для них значение false.

Это не так, как работают полигоны.Если вы создаете полигон и устанавливаете его как редактируемый и перетаскиваемый, а затем изменяете его цвет, он запоминает исходное состояние флага.

В документации не ясно, что следует ожидать, но это несоответствие кажетсякак ошибка в Google Maps для меня.В конечном счете, я не хочу отдельно отслеживать состояние 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, былиредактируемый и перетаскиваемый, вам нужно установить их в true при вызове 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
    }
  });

});

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>