0

下面是我的代码：

const SiteGoogleMap = compose(
withProps({
  googleMapURL: `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAP_API_KEY}&v=3.exp&libraries=geometry,drawing,places`,
  loadingElement: <div style={{ height: `100%` }} />,
  containerElement: <div style={{ height: `400px` }} />,
  mapElement: <div style={{ height: `100%` }} />
}),
withScriptjs,
withGoogleMap
)((props) =>
<GoogleMap
defaultZoom={18}
defaultCenter={{ lat: 3.1314067, lng: 101.6285082 }}
>
{props.isMarkerShown && <Marker position={{ lat: -34.397, lng: 150.644 
 }} onClick={props.onMarkerClick} />}

  <DrawingManager
    defaultDrawingMode={google.maps.drawing.OverlayType.POLYGON}
    defaultOptions={{
      drawingControl: true,
      drawingControlOptions: {
        position: google.maps.ControlPosition.TOP_CENTER,
        drawingModes: [
          google.maps.drawing.OverlayType.POLYGON
        ],
      }
    }}
  />
  <Polygon path={coordinates} />
</GoogleMap>
)

我想从我的服务器获取坐标（多边形路径）。以下是我为获得它所做的工作。它是一个组件：

export default class Map extends Component {
  state = {
    isMarkerShown: false,
    coordinates: []
  }

  componentDidMount() {
    this.fetchBoundaries()
  }

  render () {
    const { coordinates } = this.state

    return (
        <SiteGoogleMap
          isMarkerShown={this.state.isMarkerShown}
          onMarkerClick={this.handleMarkerClick}
        />
    );
  }
  async fetchBoundaries () {
    try {
      const { coordinates } = this.state
      const item = await service.getBoundaries('59d850878328bd177bf50b4d')
      coordinates = item.boundaries
      this.setState({ coordinates })
    } catch (e) {
      notification.show('error', 'Unable to load successfully', 'Unable to load client successfully. Please try again later.')
    }
  }
}

从 fetchBoundaries() 函数，我可以得到我的坐标。但是，它不能将其传递<Polygon path={coordinates} />给显示。

有谁知道出了什么问题？

4

0 回答 0