React js react-google-maps drawingmanager添加制造商

时间:2019-12-20 17:06:50

标签: javascript reactjs google-maps

我希望能够做到这一点,并且移动标记的点会相应地更改图形管理器的区域和主要点。

我正在使用DrawingManager创建区域,但是我无法将主要点设置为制作者,也没有办法让这些点毫无问题地移动。

你能帮我吗?

enter image description here

代码:

<GoogleMap
ref={this.onMapMounted}
defaultZoom={this.props.defaultZoom}
defaultCenter={this.props.defaultCenter}
loadingElement={
  this.props.loadingElement || <div style={{ height: '100%' }} />
}
containerElement={
  this.props.containerElement || <div style={{ height: '400px' }} />
}
mapElement={this.props.mapElement || <div style={{ height: '100%' }} />}
onBoundsChanged={this.onBoundsChanged}
center={this.props.center}
onClick={this.props.onClick}
>
{this.props.marker}
{this.props.drawing &&
<DrawingManager
  defaultDrawingMode={google.maps.drawing.OverlayType.POLYGON}
  onPolygonComplete={poly => {
    return this.props.onPolygonComplete(poly)
  }}
  //getDrawingMode={() => console.log("a")}
  defaultOptions={{
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.POLYGON,
      ],
    },
    markerOptions: {icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'},
    polygonOptions: {
      fillColor: `#2196F3`,
      strokeColor: `#2196F3`,
      fillOpacity: 0.5,
      strokeWeight: 2,
      clickable: true,
      editable: true,
      draggable: true,
      zIndex: 1,
    },
  }}
/>}
</GoogleMap>

0 个答案:

没有答案