Google-maps-react标记不显示InfoWindow onClick

Question

当我点击google maps标记时，它会注册点击，但我无法在状态改变后显示InfoWindow。

尝试在单击时设置/读取更新的状态

import React from 'react';
import {Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps-react'; 

export class BathroomMap extends React.Component{

constructor(props){
    super(props);
    this.state = {
        gmapsAPI: "https://maps.googleapis.com/maps/api/js?key="+ this.API_KEY +"&callback=initMap",
        center: {
            lat: 40.7367,
            lng: -73.9899
          },
        zoom: 15,
        showingInfoWindow: false,
        activeMarker: {},
        selectedPlace: {},
        infoWindowOpen: false,
    }

    this.handleToggleOpen = this.handleToggleOpen.bind(this);
}

handleToggleOpen = () => {
    console.log("Marker Clicked");
    this.setState({
       infoWindowOpen: !this.state.infoWindowOpen,
    });
}

render() {
    return (

            <Map google={window.google} zoom={14} initialCenter={this.state.center}>
                <Marker onClick={this.handleToggleOpen}
                    name={'Current location'} />
                <InfoWindow open={this.state.infoWindowOpen} onClose={this.onInfoWindowClose}>
                    <div>
                        <h1>Marker Info Placeholder</h1>
                    </div>
                </InfoWindow>
            </Map>

    );
}
}

BathroomMap = GoogleApiWrapper({
  apiKey: (/*Omitted*/)
})(BathroomMap)

'''

我期望google map标记会出现某种类型的InfowWindow，但相反，infowWindowOpened返回的是未定义的

Answer 1

InfoWindow上的google-maps-react文档如下：

组件的可见性由可见道具控制。可见道具是一个布尔(Proptypes.bool)，当为true时显示 ，当为false时隐藏它。

有两种方法可以控制 组件的位置。可以使用位置道具，也可以使用标记道具将 组件直接连接到现有的 组件。

我的答案和链接的codesandbox在相关的线程React和Google-Maps-React。不显示InfoWindow希望对您有所帮助。