如何使用google-maps react加载GeoJSON？

Question

我正在尝试将一个GeoJSON层加载到我的React Google Map上。我知道在普通的JS中可以使用map.data.loadGeoJson()，但google-maps react似乎不支持这一点。有没有办法让它工作，或者至少有一个变通的办法？

我尝试了这个解决方案，但它对我不起作用：https://medium.com/@dmw9400/using-geojson-with-google-maps-api-5127f7498a33

在componentDidMount中获取GeoJSON文件：

    const { feedInfo } = this.props;
    const geojson = await this.props.store.feeds.getGeojson(feedInfo.feed_code);
    const coordinates = geojson.geometry.coordinates;
    await this.setState({ coords: coordinates });
  }

正在尝试将GeoJSON更改为多边形格式：

   const { coords } = this.state;
    let coordArr = [];
    coords.map(coord => coordArr.push({ lat: coord[1], lng: coord[0] }));
      return (
        <Polygon
          paths={coordArr}
          strokeColor={POLYGON_STYLE.BORDER_COLOR}
          strokeOpacity={0.8}
          strokeWeight={2}
          fillColor={POLYGON_STYLE.BACKGROUND_COLOR}
          fillOpacity={0.35}
        />);
  }

渲染贴图：

    return (

      <Map
        google={this.props.google}
        onReady={this.autoCenterMap}
      >
      {this.loadPolygon()}
      </Map>
    );
  }

Answer 1

我使用onReady中的map参数解决了这个问题，然后使用map.data.addGeoJson而不是loadGeoJson。

     <Map
        google={this.props.google}
        onReady={this.autoCenterMap}
      />

autoCenterMap = ({ google }, map) => {
    this.loadGeoJson(map);
*code continues*
  }

loadGeoJson = async (map) => {
    const geojsonRoutes = await this.getRoutes(feed_code);
    const geojsonEnvelope = await this.getEnvelope(feed_code)
    map.data.addGeoJson(geojsonEnvelope);
    map.data.addGeoJson(geojsonRoutes); // # load geojson layer
}