单击标记后如何正确显示弹出窗口

Question

我想在单击Google地图上的标记后显示一个弹出窗口，但没有成功。在代码最重要的部分下面：

ShipTracker.js

import { InfoWindow } from 'google-map-react';
const Ship = ({ ship, logoMap, logoClick }) => {
    const shipName = ship.NAME;
    const company = shipCompanyMap[shipName];

    const img = logoMap[company && company.split(' ').join('').toUpperCase()];
    return (
        <div onClick={(event) => logoClick(event, ship)}>
            {/* Render shipImage image */}
            <img src={img} alt="Logo" />
            <InfoWindow>
                <div>Vessel Details</div>
            </InfoWindow>
        </div>
    );
};
export { Ship };

GoogleMap.js

class BoatMap extends Component {
    constructor(props) {
        super(props);
        this.state = {
            ships: [],
            type: 'All',
            shipTypes: [],
            activeShipTypes: [],
            logoMap: {}
        };
        this.updateRequest = this.updateRequest.bind(this);
        this.countDownInterval = null;
    }

    // Other operations ....

    handleMarkerClick = (event, data) => {
        console.log(event.target, data);
        this.props.setActiveShip(data.NAME, data.LATITUDE, data.LONGITUDE, this.state.ships.images);
    };

    render() {
        return (
            <div className="google-map">
                <GoogleMapReact
                    bootstrapURLKeys={{ key: 'My_KEY' }}
                    center={{
                        lat: this.props.activeShip ? this.props.activeShip.latitude : 42.4,
                        lng: this.props.activeShip ? this.props.activeShip.longitude : -71.1
                    }}
                    zoom={8}
                >
                    {/* Rendering all the markers here and the infoWindow*/}
                    {this.state.ships.map((ship) => (
                        <Ship
                            ship={ship}
                            key={ship.MMSI}
                            lat={ship.LATITUDE}
                            lng={ship.LONGITUDE}
                            logoMap={this.state.logoMap}
                            logoClick={this.handleMarkerClick}
                            windowBoxClick={this.infoWindowClick}
                        />
                    ))}
                </GoogleMapReact>
            </div>
        );
    }
}


export default class GoogleMap extends React.Component {
    state = {
        ships: [],
        activeShipTypes: [],
        activeCompanies: [],
        activeShip: null
    };

    setActiveShip = (name, latitude, longitude) => {
        this.setState({
            activeShip: {
                name,
                latitude,
                longitude
            }
        });
    };

    render() {
        return (
            <MapContainer>
                {/* This is the Google Map Tracking Page */}
                <BoatMap
                    setActiveShip={this.setActiveShip}
                    activeShip={this.state.activeShip}
                    handleDropdownChange={this.handleDropdownChange}
                />
                <ShipTracker
                    ships={this.state.ships}
                    setActiveShip={this.setActiveShip}
                    onMarkerClick={this.handleMarkerClick}
                    onWindowClick={this.infoWindowClick}
                />
            </MapContainer>
        );
    }
}

到目前为止我所做的：

1）我可以成功单击标记。我可以确认这一点，因为我console.log()并仔细检查了我是否获得了正确的数据。

2）通过this post了解问题的性质很有用，但是我无法解决问题。

3）This source也很有用，但就像在第2点上发帖一样，它似乎使用了react-modal，但我想展示一个infoBox，所以我不确定{{ 1}}将是一个很好的解决方案。

恐怕我的想法太多了，解决方案可能比继续研究不同的方法更简单。非常感谢您为解决此问题指明了正确的方向。