如何在反应谷歌地图渲染中显示自定义 html 弹出窗口

Question

我想在地图视图顶部位置显示 html 自定义弹出窗口。 当地图被渲染时，Popup 应该出现在加载中。

我检查了 infoview 和覆盖功能，但无法真正弄清楚如何集成到以下代码中。

引用此链接在谷歌地图画布中渲染反应组件

但无法在下面的代码中实现。

成分

class MapComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: this.props.data,
      iconIndex: 0,
      sidebarExpanded: this.props.sidebarExpanded,
    };

    this.avglat = 0;
    this.avglng = 0;
  }
  componentDidMount() {
    this.setState({
      data: this.props.data,
    });
  }
  toggleMarker = (index) => {
    let data = this.state.data;
    let newData = data.map((latData, latIndex) => {
      if (latIndex === index) {
        latData.iconClicked = true;
      } else {
        latData.iconClicked = false;
      }
      return latData;
    });
    this.setState({
      data: newData,
      iconIndex: index,
    });
  };
  componentWillReceiveProps(nextProps) {
    this.setState({
      data: nextProps.data,
    });
    this.avglat = 0;
    this.avglng = 0;
  }

  handleInfoWindowClose = (index) => {
    let data = this.state.data;
    let newData = data.map((latData, latIndex) => {
      if (latIndex === index) {
        latData.iconClicked = false;
      }
      return latData;
    });
    this.setState({
      data: newData,
    });
  };
  render() {
    console.log("map", this.state.data);
    this.avglat = 0;
    this.avglng = 0;
    if (this.state.data.length > 0) {
      this.state.data.map((val) => {
        this.avglat += val.location.lat;
        this.avglng += val.location.lng;
      });
      this.center = {
        lat: this.avglat / this.state.data.length,
        lng: this.avglng / this.state.data.length,
      };
    } else {
      this.center = {
        lat: 26.9124336,
        lng: 75.7872709,
      };
    }

    const GoogleMapExample = withScriptjs(
      withGoogleMap((props) => (
        <GoogleMap
          center={this.center}
          defaultZoom={2}
          options={{
            styles: MapStyle,
            scrollwheel: false,
            fullscreenControl: false,
            streetViewControl: false,
            mapTypeControl: false,
          }}
        >
          {this.state.data.map((datas, index) => {
            let icon = { url: mapMarker };
            let iconActive = { url: mapMarkerActive };
            console.log("map for", datas);
            return (
              <>
                <Marker
                  key={index}
                  position={{
                    lat: datas.location.lat,
                    lng: datas.location.lng,
                  }}
                  icon={datas.iconClicked === true ? iconActive : icon}
                  onClick={() => this.toggleMarker(index)}
                >
                  {datas.iconClicked && index === this.state.iconIndex && (
                    <InfoWindow
                      options={{ disableAutoPan: true }}
                      position={{
                        lat: datas.location.lat,
                        lng: datas.location.lng,
                      }}
                      options={{
                        boxStyle: {
                          boxShadow: `3px 3px 10px rgba(0,0,0,0.6)`,
                        },
                        closeBoxURL: "",
                      }}
                      onCloseClick={() => this.handleInfoWindowClose(index)}
                    >
                      <InfoCardsForMarker cardData={datas} />
                    </InfoWindow>
                  )}
                </Marker>
              </>
            );
          })}
        </GoogleMap>
      ))
    );

    return (
      <>
        <GoogleMapExample
          loadingElement={
            <div
              style={{
                height: "82vh",
                textAlign: "center",
                verticalAlign: "center",
              }}
            >
              Loading ...
            </div>
          }
          googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=${GoogleMapKey.googleMapKey}`}
          containerElement={
            <div
              style={{ height: `82vh`, width: "31vw", paddingTop: "10px" }}
            />
          }
          mapElement={<div style={{ height: `82vh`, paddingTop: "10px" }} />}
        />
      </>
    );
  }
}
// }

export default MapComponent;