Как остановить рисование после завершения одного круга в DrawingManager на реагировать-google-карты? - PullRequest
Новая
       25

Как остановить рисование после завершения одного круга в DrawingManager на реагировать-google-карты?

0 голосов
/ 24 января 2019

Я уже упоминал об этой проблеме.

Я также могу реализовать это, но проблема в том, как мне определить, есть ли какое-то изменение, это radius , потому что DrawingManager компонент будет размонтирован.

Также я не могу использовать функцию, подобную setDrawingMode(null), потому что она не доступна в общедоступных API реагировать на google-maps, также обновляется options, поскольку drawingControl = false не работает.

Есть ли другое возможное решение, с помощью которого мы можем ограничить пользователя в создании только одного круга и также каким-либо образом получить radius_changed?

Ниже приведен код 

<GoogleMap
    defaultZoom={8}
    defaultCenter={new google.maps.LatLng(-34.397, 150.644)}
  >
    <DrawingManager
      defaultDrawingMode={google.maps.drawing.OverlayType.CIRCLE}
      defaultOptions={{
        drawingControl: true,
        drawingControlOptions: {
          position: google.maps.ControlPosition.TOP_CENTER,
          drawingModes: [
            google.maps.drawing.OverlayType.CIRCLE,
          ],
        },
        circleOptions: {
          fillColor: `#ffff00`,
          fillOpacity: 1,
          strokeWeight: 5,
          clickable: false,
          editable: true,
          zIndex: 1,
        },
      }},
      onOverlayComplete={(...args)=> /* what to do to disable drawing??*/}
    />
  </GoogleMap>

Любая помощь будет оценена. Спасибо.

1 Ответ

0 голосов
/ 24 января 2019

Вот подпись для события onOverlayComplete: 

onOverlayComplete?(e: google.maps.drawing.OverlayCompleteEvent): void

Поскольку событие onOverlayComplete привязано к экземпляру DrawingManager class , режима рисованияможно отключить , например: 

class MyMapComponent extends Component {
  handleOverlayComplete(e){
    this.setDrawingMode(null);
    this.setOptions({drawingControlOptions: {drawingModes: [] }}); 
  };

  render() {
    return (
      <GoogleMap defaultZoom={this.props.zoom} defaultCenter={this.props.center}>
        <DrawingManager
          defaultDrawingMode={google.maps.drawing.OverlayType.CIRCLE}
          defaultOptions={{
            drawingControl: true,
            drawingControlOptions: {
              position: google.maps.ControlPosition.TOP_CENTER,
              drawingModes: [google.maps.drawing.OverlayType.CIRCLE]
            },
            circleOptions: {
              fillColor: `#ffff00`,
              fillOpacity: 1,
              strokeWeight: 5,
              clickable: false,
              editable: true,
              zIndex: 1
            }
          }}
          onOverlayComplete={this.handleOverlayComplete}
        />
      </GoogleMap>
    );
  }
}

Вот демоверсия

...